Closed DarXnake closed 1 month ago
I have encountered this issue as well!
I have downgraded the library to v9.0.6
for now, and it works. It seems like #2343 or #2358 caused this issue.
It didn't work for me to revert the version. Could you take a look at my issue to see if you can help me?
Reverting the version didn't help.
The issue that I am facing is, I have the date picker placed inside a popover and on selecting the date from month other than the current, popover gets closed and reopening it, opens the date picker with the current date in focus. Ideally the selected date / month should be in view.
You can make an additional state for month navigation
const [currentMonth, setCurrentMonth] = useState<Date | undefined>(new Date());
<DayPicker
...
month={currentMonth}
onMonthChange={setCurrentMonth}
/>
As alternative It's possible to use defaultMonth
instead of month
, but it's required to use a React state that rerender the whole Calendar component on date change.
In this way it's possible to avoid having a separate state for the month.
const [selectedDate, setSelectedDate] = useState(new Date());
<Calendar
mode="single"
selected={selectedDate}
onSelect={setSelectedDate}
defaultMonth={selectedDate} // NOTE ME
/>
So, if you are using react-hook-form
you must use the <Controller />
API and not the register
API.
Hi, and thanks for reviewing this bug report! :)
Code
Expected Behavior
When a date is selected, the
DayPicker
should remain on the month of the selected date.Actual Behavior
In any selection mode (
single
,range
, ormultiple
), if you set astartMonth
orendMonth
and trigger anonSelect
that updates a React state, theDayPicker
display will reset to the current month instead of remaining on the month where you selected a day.Removing either
startMonth
andendMonth
oronSelect
resolves this issue.Exemple
CodeSandbox