Skip to content

Month picker navigation snaps back to the selected month when navigating to month with no selectable day near maxDate #6290

@GauravDhuri

Description

@GauravDhuri

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, 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:

  1. 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);
  1. Open the month dropdown in header (click "May")
  2. Click July
  3. 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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions