[Question] Is there a way to reset user's start date selection on calendar-range

dgonzalezr commented 1 month ago

Our date picker displays a panel that renders the cally component inside when the date picker input is focused/clicked. We have noticed a strange behavior when using the calendar-range component, I'll try to explain it:

When the user clicks the input and selects the start date of the range but suddenly clicks outside of the element, we close the calendar panel (where cally is rendered)
At this point, a start date has been selected in Cally, but there was no end date selected
If the user clicks the date picker input and opens the calendar panel again, the previous selection is still there.

Is there a way we can reset the calendar-range state? I'm attaching a video here for clarification, the same can be seen in the Cally documentation site.

https://github.com/WickyNilliams/cally/assets/328492/6cac17c7-fdce-4c63-8a73-b389d4f66c8f

What we would like, is a way that allows us to reset the calendar-range state if the user clicks outside and no end date has been selected. This should take into account that if a date range (start/end date is already set) we should be able to keep that range selection and only reset the start date selection action that was not completed.

I hope I've explained myself, otherwise please feel free to ask for details, I'll be more than glad to provide as many as needed.

WickyNilliams commented 1 month ago

Makes sense. There's definitely a need for some ability to cancel a tentative selection. I'll have a think on how best to support this

WickyNilliams commented 1 month ago

Check out #49. I've exposed a tentative prop on the range component. You can clear this whenever you like e.g. on click outside / close of the picker, and it should give you the desired behavior. Additionally, you can set tentative to a date yourself, if you ever need to start a selection for a user.

Would this work for you?

dgonzalezr commented 4 weeks ago

Hey @WickyNilliams , thank you for taking the time to look into this so quickly.

I looked at the changes in the PR, if I understood correctly we would have a new tentative prop that can be set externally (default it will be the range start date value I think). That means I can set tentative as undefined on the calendar click outside handler and the range start selection will be cleared. Did I miss something?

I think this will work great for us 👍🏼

WickyNilliams commented 4 weeks ago

No, you didn't miss anything, that's exactly right 👍

WickyNilliams commented 4 weeks ago

Released in 0.7.0

WickyNilliams / cally

[Question] Is there a way to reset user's start date selection on calendar-range #48