fix(DatePicker): error when unselecting a date (#1619)

* fix(DatePicker): error when unselecting a date * test: include test for select and deselect date * test: fix wrong selector --------- Co-authored-by: zernonia <zernonia@gmail.com>
unovue · Feb 14, 2025 · d3e98e9 · d3e98e9
1 parent 47b3dfa
commit d3e98e9
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 1 deletion.
diff --git a/packages/radix-vue/src/DateField/DateFieldRoot.vue b/packages/radix-vue/src/DateField/DateFieldRoot.vue
@@ -192,7 +192,7 @@ watch(locale, (value) => {
 })
 
 watch(modelValue, (_modelValue) => {
-  if (!isNullish(_modelValue) || placeholder.value.compare(_modelValue) !== 0) {
+  if (!isNullish(_modelValue) && placeholder.value.compare(_modelValue) !== 0) {
     placeholder.value = _modelValue.copy()
   }
 })

diff --git a/packages/radix-vue/src/DatePicker/DatePicker.test.ts b/packages/radix-vue/src/DatePicker/DatePicker.test.ts
@@ -236,4 +236,17 @@ describe('datePicker', async () => {
     expect(month).not.toHaveAttribute('tabindex')
     expect(year).not.toHaveAttribute('tabindex')
   })
+
+  it('should select and deselect a date', async () => {
+    const { user, trigger, getByTestId } = setup()
+
+    await user.click(trigger)
+    const calendar = getByTestId('calendar')
+    const targetCell = calendar.querySelector('div[data-radix-vue-calendar-cell-trigger]:not([data-outside-view])')!
+
+    await user.click(targetCell)
+    expect(calendar.querySelector('[data-selected]')).toBeInTheDocument()
+    await user.click(targetCell)
+    expect(calendar.querySelector('[data-selected]')).not.toBeInTheDocument()
+  })
 })