search

wojtekmaj / react-date-picker

A date picker for your React app.
https://projects.wojtekmaj.pl/react-date-picker
MIT License
1.27k stars 195 forks source link

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

Open iamanoopmk opened 3 months ago

iamanoopmk commented 3 months ago

Before you start - checklist

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

iamanoopmk commented 2 months ago

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 commented 2 months ago

Any update on this issue?

grovesNL commented 1 day ago

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 commented 1 day ago

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 commented 1 day ago

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

Purgenta commented 1 day ago

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