From 2f0a1b340ac146e74b3b80036086941bd8c97ee9 Mon Sep 17 00:00:00 2001
From: Eduard Predescu <eduard.florin.predescu@gmail.com>
Date: Thu, 15 Aug 2024 18:39:56 +0300
Subject: [PATCH] fix: regression on date picker calendars not updating fields

---
 packages/radix-vue/src/DateField/DateFieldRoot.vue     |  1 +
 packages/radix-vue/src/DatePicker/DatePickerRoot.vue   | 10 +++++++---
 .../src/DateRangeField/DateRangeFieldRoot.vue          |  4 +++-
 .../src/DateRangePicker/DateRangePickerRoot.vue        |  3 ++-
 4 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/packages/radix-vue/src/DateField/DateFieldRoot.vue b/packages/radix-vue/src/DateField/DateFieldRoot.vue
index 85e8886a2..39f020c58 100644
--- 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
index ebffe1cf4..a0eeb8c41 100644
--- 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
index 2438d3317..89f30b33d 100644
--- 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
index 1e8b43c22..39f6382e5 100644
--- 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({