fix: clamp displayed month when endMonth changes

packages/react-day-picker/src/DayPicker.test.tsx

@@ -533,6 +533,34 @@ describe("when the `month` is changed programmatically", () => {
   });
 });
 
+test("clamps the displayed month when endMonth changes before the current month", () => {
+  const { rerender } = render(
+    <DayPicker
+      captionLayout="dropdown"
+      defaultMonth={new Date(2024, 8, 1)}
+      endMonth={new Date(2024, 11, 1)}
+    />,
+  );
+
+  expect(grid("September 2024")).toBeInTheDocument();
+
+  rerender(
+    <DayPicker
+      captionLayout="dropdown"
+      defaultMonth={new Date(2024, 8, 1)}
+      endMonth={new Date(2024, 2, 1)}
+    />,
+  );
+
+  expect(grid("March 2024")).toBeInTheDocument();
+  expect(
+    screen.getByRole("combobox", { name: labelMonthDropdown() }),
+  ).toBeInTheDocument();
+  expect(
+    screen.getByRole("combobox", { name: labelYearDropdown() }),
+  ).toBeInTheDocument();
+});
+
 test("extends the default locale", () => {
   render(
     <DayPicker

packages/react-day-picker/src/useCalendar.ts

@@ -108,6 +108,26 @@ export function useCalendar(
     setFirstMonth(newInitialMonth);
   }, [props.timeZone]);
 
+  // Keep the internal month within navigation bounds when constraints change.
+  // biome-ignore lint/correctness/useExhaustiveDependencies: clamp only when the displayed month or relevant navigation constraints change.
+  useEffect(() => {
+    const constrainedMonth = getInitialMonth(
+      { month: firstMonth, numberOfMonths: props.numberOfMonths },
+      navStart,
+      navEnd,
+      dateLib,
+    );
+
+    if (!dateLib.isSameMonth(firstMonth, constrainedMonth)) {
+      setFirstMonth(constrainedMonth);
+    }
+  }, [
+    navEnd?.getTime(),
+    navStart?.getTime(),
+    props.numberOfMonths,
+    firstMonth.getTime(),
+  ]);
+
   /** The months displayed in the calendar. */
   // biome-ignore lint/correctness/useExhaustiveDependencies: We want to recompute only when specific props change.
   const { months, weeks, days, previousMonth, nextMonth } = useMemo(() => {