Calendar popup state is not reset when the Date Value is set based on state change

[iamanoopmk]

Before you start - checklist

• I followed instructions in documentation written for my React-Date-Picker version
• I have checked if this bug is not already reported

Description

When using the library and I change the date value from external action, the value shown in the text box updates correctly. But the calendar that pops up is still on the old year and month.

I have a basic example setup in the below codesandbox
https://codesandbox.io/s/react-date-picker-xxsgjk

Steps to reproduce

Steps to reproduce using the below codesandbox

1. Open the calendar and choose a date from previous year (June 1st, 2023)
2. Click the button to reset the date
3. Verify date is set to Jan 1st, 2024
4. Click on the calendar icon and the calendar still shows the old June month from 2023 while expectation is the it should open Jan 2024.

Expected behavior

The calendar should open to the same month and year as displayed in the text box

Actual behavior

The calendar opens to the previously selected month and year that was set by actually clicking on the calendar

Additional information

No response

Environment

• Browser (if applicable): ALL
• React-Date-Picker version: ALL
• React version: ALL

[iamanoopmk]

Could anyone provide an input here? If this is the expected behaviour then that can be mentioned and the bug report can be closed.

[Purgenta]

Any update on this issue?

[grovesNL]

I just ran into this issue too. Sometimes it's possible to work around it by using a key depending on the use case, but that wouldn't work well for the "reset" button example above.

[Purgenta]

I just ran into this issue too. Sometimes it's possible to work around it by using a key depending on the use case, but that wouldn't work well for the "reset" button example above.

Yeah that is exactly how i worked around this issue although I'd prefer to avoid remounting the component itself tbh as you get the "flashy" effect.

[iamanoopmk]

Sorry, I am a bit confused. Could you elaborate on this workaround please?

[Purgenta]

Use the date you have currently set as a key for the DatePicker itself

[lopesmartinz]

I just want to add that setting the key based on the selected value works fine but please don't make the same mistake I made at first.

You should set the key of the calendar via calendarProps and not directly in the root props of the date picker, something like:
<DatePicker {...datePickerProps} calendarProps={{ key: selectedValue?.toString() }} />

This way only the calendar will get re-rendered, which is what we want in this scenario, instead of re-rendering the whole date picker.

[github-actions]

This issue is stale because it has been open 90 days with no activity. Remove stale label or comment or this issue will be closed in 14 days.

[grovesNL]

Still an issue

[github-actions]

This issue is stale because it has been open 90 days with no activity. Remove stale label or comment or this issue will be closed in 14 days.

[grovesNL]

Still an issue