fix: regression on date picker calendars not updating fields

unovue · Aug 15, 2024 · 2f0a1b3 · 2f0a1b3
1 parent 4d7fca8
commit 2f0a1b3
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 5 deletions.
diff --git a/packages/radix-vue/src/DateField/DateFieldRoot.vue b/packages/radix-vue/src/DateField/DateFieldRoot.vue
@@ -123,6 +123,7 @@ onMounted(() => {
 
 const modelValue = useVModel(props, 'modelValue', emits, {
   defaultValue: defaultValue.value,
+  passive: (props.modelValue === undefined) as false,
 }) as Ref<DateValue>
 
 const defaultDate = getDefaultDate({

diff --git a/packages/radix-vue/src/DatePicker/DatePickerRoot.vue b/packages/radix-vue/src/DatePicker/DatePickerRoot.vue
@@ -109,6 +109,7 @@ 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({
@@ -157,12 +158,15 @@ provideDatePickerRootContext({
   dateFieldRef,
   dir,
   onDateChange(date: DateValue | undefined) {
-    if (!date || !modelValue.value)
+    if (!date || !modelValue.value) {
       modelValue.value = date
-    else if (!preventDeselect.value && isSameDay(modelValue.value as DateValue, date))
+    }
+    else if (!preventDeselect.value && isSameDay(modelValue.value as DateValue, date)) {
       modelValue.value = undefined
-    else
+    }
+    else {
       modelValue.value = date.copy()
+    }
   },
   onPlaceholderChange(date: DateValue) {
     if (!isEqualDay(date, placeholder.value))

diff --git a/packages/radix-vue/src/DateRangeField/DateRangeFieldRoot.vue b/packages/radix-vue/src/DateRangeField/DateRangeFieldRoot.vue
@@ -17,6 +17,7 @@ import {
   areAllDaysBetweenValid,
   hasTime,
   isBefore,
+  isBeforeOrSame,
 } from '@/date'
 import { createContent, getSegmentElements, initializeSegmentValues, isSegmentNavigationKey, syncSegmentValues } from '@/DateField/utils'
 import type { Direction } from '@/shared/types'
@@ -121,6 +122,7 @@ 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({
@@ -180,7 +182,7 @@ const isInvalid = computed(() => {
   if (!modelValue.value.start || !modelValue.value.end)
     return false
 
-  if (!isBefore(modelValue.value.start, modelValue.value.end))
+  if (!isBeforeOrSame(modelValue.value.start, modelValue.value.end))
     return true
 
   if (propsIsDateUnavailable.value !== undefined) {

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