Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug]: RangeCalendar display does not update when cleared programmatically #1611

Closed
briankchan opened this issue Feb 10, 2025 · 0 comments · Fixed by #1612
Closed

[Bug]: RangeCalendar display does not update when cleared programmatically #1611

briankchan opened this issue Feb 10, 2025 · 0 comments · Fixed by #1612
Assignees
Labels
bug Something isn't working

Comments

@briankchan
Copy link

Environment

Development/Production OS: Windows 11
Node version: 22
Package manager: pnpm@9
Radix Vue version: 1.9.13
Vue version: 3
CSS framework: tailwindcss@3
Client OS: Windows 11
Browser: Firefox

Link to minimal reproduction

https://stackblitz.com/edit/sjvn9m-8dgymjir?file=src%2FApp.vue,package.json

Steps to reproduce

  1. Open repro
  2. Optionally change date
  3. Click 'clear' button

Describe the bug

The UI does not update when the model value's start/end are programmatically set to undefined, even though the model value does actually change.

Expected behavior

The selected range should be cleared when the 'clear' button is clicked.

Context & Screenshots (if applicable)

I think the root cause here is that the range calendar tries to completely clear its selection by setting the model value to { start: undefined, end: undefined } when a user starts a new selection. This means that while the selection is in progress, the value of the internal startValue does not match the value in the model, even though the watch that keeps them in sync is still active.

I'm guessing that undefined modelValue.start/end values are ignored in order to prevent them from overwriting startValue during the selection, but it seems more reasonable to me to just keep startValue always in sync with modelValue.start by setting modelValue to { start: startValue.value, end: undefined } until the selection is completed. Then, it's up to the caller to handle partial selections as needed.

Btw, here are some ways that partial selections may need to be handled for various use cases:

  • treat as start/end undefined (current behavior)
  • treat as a range where start == end
  • allow partial selection with end: undefined
  • allow partial selection with start: undefined
  • ignore and use previous selection instead
  • ignore and use default value instead
  • a date range picker in a popup may need to ignore the partial selection while the popup is open, but commit a value that matches one of the above if the selection is still partial when the popup closes, and may also need different functionality if the selection is cancelled with the esc key

Since there are many ways partial selections may need to be handled, I think it makes the most sense to just expose them to the caller and let them deal with it rather than trying to do anything "intelligent."

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
3 participants