[Bug]: If the DatePicker calendar is opened, and clear the currently selected date, then try selecting another date requires two clicks instead of one.

abpaul1993 commented 10 months ago

Package

carbon-components, carbon-components-react

Browser

Chrome, Safari, Firefox, Edge

Package version

10.56.0

React version

=16.14.0

Description

If the DatePicker calendar is opened, and clear the currently selected date, then we are experiencing an issue where selecting another date requires two clicks instead of one. In other words, the new date selection does not register with just one click; we need to click twice for the new date to be selected. If we don’t clear the current selected date then issue is not coming.

https://github.com/carbon-design-system/carbon/assets/136786799/d0f537fb-cbca-4384-9e8b-f6c6134f881b

Reproduction/example

https://v7-react.carbondesignsystem.com/?path=/story/components-datepicker--single

Steps to reproduce

https://v7-react.carbondesignsystem.com/?path=/story/components-datepicker--single Select date picker it will open the calendar. Clear the input field and try to select the another date. It need 2 clicks to select another date.

Suggested Severity

Severity 3 = User can complete task, and/or has a workaround within the user experience of a given component.

Application/PAL

No response

Code of Conduct

[X] I agree to follow this project's Code of Conduct
[X] I checked the current issues for duplicate problems

tay1orjones commented 10 months ago

Thanks for opening this. As far as workarounds, it might be that the clearing of the input is not properly clearing the calendar/flatpickr instance. You could try placing a key on the component and changing it's value when the input's value changes to be empty. When the key changes, this will instruct react to destroy the existing component tree and regenerate it, effectively resetting any internal state.

This is a brute force workaround though and fixing the upstream issue would be the ideal outcome for this. PRs are open if you'd like to submit a fix!

victordaj commented 2 months ago

@tay1orjones Hello the proposed workaround doesn't work.

If you have a value passed, and you change the key it will reconstruct it, but it won't grab the date you clicked on the calendar, it will go back to the default passed value

Maybe I approached it wrong, here is a codesandbox and some steps for the issue:

go to sandbox: https://codesandbox.io/p/sandbox/elegant-ully-qyj987
click the input
remove the value from the input
try to select another value from the calendar (you got in the console [] and nothing is selected)

And if you reset the key in case there is no "dates" (it is an empty array) it will get reconstructed after changes

abpaul1993 commented 2 months ago

Hi @tay1orjones ,  Your proposed workaround doesn't work and facing the same issue. And it's been a long time since the ticket was opened. Could you please provide guidance on how to properly clear the input and reset the calendar/flatpickr instance so that it functions correctly. Or Can you please provide us the Estimate timeline when this issue can be resolved?

mr2g commented 2 weeks ago

Bumping up this issue, no workaround works for us and our large cms. Come on IBM you can do a better datepicker than this lol

carbon-design-system / carbon