You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
When we pick a month from the month dropdown, the calendar sometimes jumps to that month for a moment and then snaps back to the month we were already on. On top of that, onMonthChange fires twice.. once for the month we picked and again for the month it snapped to (which we never selected)
To Reproduce
Steps to reproduce the behavior:
Render the picker below (controlled openToDate; minDate= May 24, 2026, maxDate = Jul 23, 2026; includeDates only in May, so July has no selectable day)
const minDate = new Date(2026, 4, 24); // May 24, 2026
const maxDate = new Date(2026, 6, 23); // July 23, 2026
const includeDates = [new Date(2026, 4, 5), new Date(2026, 4, 30)]; // May Only
const Example= () => {
const [visibleMonth, setVisibleMonth] = useState<Date | undefined>(undefined);
return <DatePicker
inline
selected={new Date(2026, 4, 5)}
onChange={() => {}}
minDate={minDate}
maxDate={maxDate}
includeDates={includeDates}
openToDate={visibleMonth ?? new Date(2026, 4, 24)}
onMonthChange={(d) => {
console.log("onMonthChange", d.toISOString())
setVisibleMonth(d);
}}
showMonthDropdown
dropdownMode="scroll"
/>;
};
render(Default);
Open the month dropdown in header (click "May")
Click July
The calendar briefly shows July, then snaps back to May. Sometimes this might not even show, the calendar might look as if its stuck on May.
Expected behavior
Selecting July should navigate to July and keep it displayed.
Screenshots
Datepicker.month.snapback.mov
Desktop (please complete the following information):
OS: macOS Tahoe
Browser: Chrome
Version: React 19, react-datepicker 9.1.0
Additional context
Root cause: changeMonth(monthIndex) uses setMonth(date, monthIndex), which preserves the day of month.. navigating from the 24th lands on the 24th of the target month, which can exceed maxDate. When the target month has no selectable day, handleMonthChange falls back to that out of range date, setPreSelection rejects it, so preSelection stays in the old month. changeMonth also calls onMonthSelectedInChange(0) and componentDidUpdate preselection branch fires because monthSelectedIn changed.. resetting the displayed month to the stale preSelection and calling onMonthChange with that month. Clamping the navigated date into [minDate, maxDate] in handleMonthChange (before handleCustomMonthChange/setPreSelection) fixes it.
Describe the bug
When we pick a month from the month dropdown, the calendar sometimes jumps to that month for a moment and then snaps back to the month we were already on. On top of that,
onMonthChangefires twice.. once for the month we picked and again for the month it snapped to (which we never selected)To Reproduce
Steps to reproduce the behavior:
openToDate;minDate= May 24, 2026,maxDate = Jul 23, 2026;includeDatesonly in May, so July has no selectable day)Expected behavior
Selecting July should navigate to July and keep it displayed.
Screenshots
Datepicker.month.snapback.mov
Desktop (please complete the following information):
Additional context
Root cause:
changeMonth(monthIndex)usessetMonth(date, monthIndex), which preserves the day of month.. navigating from the 24th lands on the 24th of the target month, which can exceedmaxDate. When the target month has no selectable day,handleMonthChangefalls back to that out of range date,setPreSelectionrejects it, sopreSelectionstays in the old month.changeMonthalso callsonMonthSelectedInChange(0)andcomponentDidUpdatepreselection branch fires becausemonthSelectedInchanged.. resetting the displayed month to the stalepreSelectionand callingonMonthChangewith that month. Clamping the navigated date into [minDate, maxDate] inhandleMonthChange(beforehandleCustomMonthChange/setPreSelection) fixes it.