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

[dgonzalezr]

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.

CleanShot.2024-05-29.at.18.35.20.mp4

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]

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]

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]

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]

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

[WickyNilliams]

Released in 0.7.0