fix(DateField): emit undefined on segment clear after input is filled (…

…#1197) * chore(DateField): do not return dayPeriod for day granularity * feat(DateField): emit undefined on field delete after input filled * fix(DateField): set undefined on backspace, filter navigation events
unovue · Aug 10, 2024 · 3171892 · 3171892
1 parent 881e725
commit 3171892
Show file tree

Hide file tree

Showing 6 changed files with 18 additions and 25 deletions.
diff --git a/packages/radix-vue/src/DateField/DateFieldRoot.vue b/packages/radix-vue/src/DateField/DateFieldRoot.vue
@@ -123,7 +123,6 @@ onMounted(() => {
 
 const modelValue = useVModel(props, 'modelValue', emits, {
   defaultValue: defaultValue.value,
-  passive: (props.modelValue === undefined) as false,
 }) as Ref<DateValue>
 
 const defaultDate = getDefaultDate({
@@ -196,10 +195,12 @@ watch(modelValue, (_modelValue) => {
 })
 
 watch([modelValue, locale], ([_modelValue]) => {
-  if (_modelValue !== undefined)
+  if (_modelValue !== undefined) {
     segmentValues.value = { ...syncSegmentValues({ value: _modelValue, formatter }) }
-  else
+  }
+  else if (Object.values(segmentValues.value).every(value => value === null)) {
     segmentValues.value = { ...initialSegments }
+  }
 })
 
 const currentFocusedElement = ref<HTMLElement | null>(null)

diff --git a/packages/radix-vue/src/DateField/useDateField.ts b/packages/radix-vue/src/DateField/useDateField.ts
@@ -280,8 +280,10 @@ export function useDateField(props: UseDateFieldProps) {
       return prevValue
 
     const str = prevValue.toString()
-    if (str.length === 1)
+    if (str.length === 1) {
+      props.modelValue.value = undefined
       return null
+    }
 
     return Number.parseInt(str.slice(0, -1))
   }
@@ -813,7 +815,7 @@ export function useDateField(props: UseDateFieldProps) {
 
     segmentKeydownHandlers[props.part as keyof typeof segmentKeydownHandlers](e)
 
-    if (!isSegmentNavigationKey(e.key) && e.key !== kbd.TAB && e.key !== kbd.SHIFT && isAcceptableSegmentKey(e.key)) {
+    if (![kbd.ARROW_LEFT, kbd.ARROW_RIGHT].includes(e.key) && e.key !== kbd.TAB && e.key !== kbd.SHIFT && isAcceptableSegmentKey(e.key)) {
       if (Object.values(props.segmentValues.value).every(item => item !== null)) {
         const updateObject = { ...props.segmentValues.value as Record<AnyExceptLiteral, number> }
 

diff --git a/packages/radix-vue/src/DateField/utils/parser.ts b/packages/radix-vue/src/DateField/utils/parser.ts
@@ -41,7 +41,7 @@ export function initializeSegmentValues(granularity: Granularity): SegmentValueO
     if (key === 'literal' || key === null)
       return false
     if (granularity === 'day')
-      return !calendarDateTimeGranularities.includes(key)
+      return !calendarDateTimeGranularities.includes(key) && key !== 'dayPeriod'
     else return true
   })
 

diff --git a/packages/radix-vue/src/DatePicker/DatePickerRoot.vue b/packages/radix-vue/src/DatePicker/DatePickerRoot.vue
@@ -109,7 +109,6 @@ const dir = useDirection(propDir)
 
 const modelValue = useVModel(props, 'modelValue', emits, {
   defaultValue: defaultValue.value,
-  passive: (props.modelValue === undefined) as false,
 }) as Ref<DateValue | undefined>
 
 const defaultDate = computed(() => getDefaultDate({

diff --git a/packages/radix-vue/src/DateRangeField/DateRangeFieldRoot.vue b/packages/radix-vue/src/DateRangeField/DateRangeFieldRoot.vue
@@ -121,7 +121,6 @@ onMounted(() => {
 
 const modelValue = useVModel(props, 'modelValue', emits, {
   defaultValue: props.defaultValue ?? { start: undefined, end: undefined },
-  passive: (props.modelValue === undefined) as false,
 }) as Ref<DateRange>
 
 const defaultDate = getDefaultDate({
@@ -233,18 +232,7 @@ const startValue = ref(modelValue.value.start?.copy()) as Ref<DateValue | undefi
 const endValue = ref(modelValue.value.end?.copy()) as Ref<DateValue | undefined>
 
 watch([startValue, endValue], ([_startValue, _endValue]) => {
-  const value = modelValue.value
-  if (value.start && value.end && _startValue && _endValue && value.start.compare(_startValue) === 0 && value.end.compare(_endValue) === 0)
-    return
-
-  if (_startValue && _endValue) {
-    if (modelValue.value.start?.compare(_startValue) === 0 && modelValue.value.end?.compare(_endValue) === 0)
-      return
-    modelValue.value = { start: _startValue.copy(), end: _endValue.copy() }
-  }
-  else if (modelValue.value.start && modelValue.value.end) {
-    modelValue.value = { start: undefined, end: undefined }
-  }
+  modelValue.value = { start: _startValue?.copy(), end: _endValue?.copy() }
 })
 
 watch(modelValue, (_modelValue) => {
@@ -257,10 +245,12 @@ watch(modelValue, (_modelValue) => {
 })
 
 watch([startValue, locale], ([_startValue]) => {
-  if (_startValue !== undefined)
+  if (_startValue !== undefined) {
     startSegmentValues.value = { ...syncSegmentValues({ value: _startValue, formatter }) }
-  else
+  }
+  else if (Object.values(startSegmentValues.value).every(value => value === null)) {
     startSegmentValues.value = { ...initialSegments }
+  }
 })
 
 watch(locale, (value) => {
@@ -281,10 +271,12 @@ watch(modelValue, (_modelValue) => {
 })
 
 watch([endValue, locale], ([_endValue]) => {
-  if (_endValue !== undefined)
+  if (_endValue !== undefined) {
     endSegmentValues.value = { ...syncSegmentValues({ value: _endValue, formatter }) }
-  else
+  }
+  else if (Object.values(endSegmentValues.value).every(value => value === null)) {
     endSegmentValues.value = { ...initialSegments }
+  }
 })
 
 const currentFocusedElement = ref<HTMLElement | null>(null)

diff --git a/packages/radix-vue/src/DateRangePicker/DateRangePickerRoot.vue b/packages/radix-vue/src/DateRangePicker/DateRangePickerRoot.vue
@@ -112,7 +112,6 @@ const dir = useDirection(propsDir)
 
 const modelValue = useVModel(props, 'modelValue', emits, {
   defaultValue: props.defaultValue,
-  passive: (props.modelValue === undefined) as false,
 }) as Ref<DateRange>
 
 const defaultDate = getDefaultDate({