fix(RangeCalendar): programatically set value doesn't update the calendar (#1739)

zernonia · web-flow · commit 80001892c003 · 2025-03-21T21:40:43.000+08:00
* fix(RangeCalendar): programatically set value doesn't update the calendar

* test: add test

* chore: typo
diff --git a/packages/core/src/RangeCalendar/RangeCalendar.test.ts b/packages/core/src/RangeCalendar/RangeCalendar.test.ts
@@ -79,6 +79,23 @@ describe('rangeCalendar', () => {
     expect(heading).toHaveTextContent('January 1980')
   })
 
+  it('respects programmatically updated value', async () => {
+    const { calendar, getByTestId, rerender } = setup({ calendarProps: { modelValue: undefined } })
+
+    const selectedDays = calendar.querySelectorAll<HTMLElement>('[data-selected]')
+    expect(selectedDays).toHaveLength(0)
+
+    // update value programmatically
+    await rerender({
+      calendarProps: {
+        modelValue: zonedDateTimeRange,
+      },
+    })
+
+    const heading = getByTestId('heading')
+    expect(heading).toHaveTextContent('January 1980')
+  })
+
   it('resets range on select when a range is already selected', async () => {
     const { getByTestId, calendar, user, rerender } = setup({
       calendarProps: { modelValue: calendarDateRange },
diff --git a/packages/core/src/RangeCalendar/RangeCalendarRoot.vue b/packages/core/src/RangeCalendar/RangeCalendarRoot.vue
@@ -259,11 +259,20 @@ const {
   allowNonContiguousRanges,
 })
 
-watch(modelValue, (_modelValue) => {
-  if (!_modelValue || !_modelValue.start || (startValue.value && !isEqualDay(_modelValue.start, startValue.value))) {
+watch(modelValue, (_modelValue, _prevValue) => {
+  if ((!_prevValue.start && _modelValue?.start)
+    || !_modelValue
+    || !_modelValue.start
+    || (startValue.value && !isEqualDay(_modelValue.start, startValue.value))
+  ) {
     startValue.value = _modelValue?.start?.copy?.()
   }
-  if (!_modelValue || !_modelValue.end || (endValue.value && !isEqualDay(_modelValue.end, endValue.value))) {
+
+  if ((!_prevValue.end && _modelValue.end)
+    || !_modelValue
+    || !_modelValue.end
+    || (endValue.value && !isEqualDay(_modelValue.end, endValue.value))
+  ) {
     endValue.value = _modelValue?.end?.copy?.()
   }
 })
