fix: calendar reset after selection (#2429)

* Add test case

* Apply fix

* Update test

* Remove test to revert commit with bug

examples/TestCase2389.test.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+
+import { labelGrid } from "react-day-picker";
+
+import { dateButton, grid, gridcell, nextButton } from "@/test/elements";
+import { render } from "@/test/render";
+import { user } from "@/test/user";
+
+import { TestCase2389 } from "./TestCase2389";
+
+const today = new Date(2024, 8, 6);
+
+beforeAll(() => jest.setSystemTime(today));
+afterAll(() => jest.useRealTimers());
+
+beforeEach(async () => {
+  render(<TestCase2389 />);
+});
+
+describe("when moving to the next month", () => {
+  beforeEach(async () => {
+    await user.click(nextButton());
+  });
+  test("should display the next month", () => {
+    const nextMonth = new Date(2024, 9, 1);
+    expect(grid(labelGrid(nextMonth))).toBeVisible();
+  });
+  describe("when clicking a day button", () => {
+    const day = new Date(2024, 9, 10);
+    beforeEach(async () => {
+      await user.click(dateButton(day));
+    });
+    test("should select the day", async () => {
+      expect(gridcell(day, true)).toHaveAttribute("aria-selected", "true");
+    });
+    test("should still display the next month", () => {
+      const nextMonth = new Date(2024, 9, 1);
+      expect(grid(labelGrid(nextMonth))).toBeVisible();
+    });
+  });
+});

examples/TestCase2389.tsx

@@ -0,0 +1,18 @@
+import React, { useState } from "react";
+
+import { DayPicker, DateRange } from "react-day-picker";
+import "react-day-picker/style.css";
+
+export function TestCase2389() {
+  const [selectedPeriod, setSelectedPeriod] = useState<DateRange | undefined>();
+
+  return (
+    <DayPicker
+      mode="range"
+      startMonth={new Date("2024-07-01")}
+      endMonth={new Date("2025-07-31")}
+      onSelect={setSelectedPeriod}
+      selected={selectedPeriod}
+    />
+  );
+}

examples/index.ts

@@ -61,6 +61,7 @@ export * from "./StylingModifiers";
 export * from "./TailwindCSS";
 export * from "./Testcase1567";
 export * from "./TestCase2047";
+export * from "./TestCase2389";
 export * from "./Utc";
 export * from "./WeekIso";
 export * from "./Weeknumber";

src/DayPicker.test.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { addMonths, startOfDay, startOfMonth } from "date-fns";
+import { startOfDay, startOfMonth } from "date-fns";
 import { defaultLocale } from "react-day-picker";
 
 import {
@@ -16,7 +16,6 @@ import { user } from "@/test/user";
 import { DayPicker } from "./DayPicker";
 import { MonthProps } from "./components/Month";
 import { MonthsProps } from "./components/Months";
-import { labelGrid } from "./labels";
 
 const testId = "test";
 const dayPicker = () => screen.getByTestId(testId);
@@ -147,19 +146,6 @@ describe("when the `month` is changed programmatically", () => {
   });
 });
 
-describe("when the `startMonth` is changed programmatically", () => {
-  test("should update the calendar to reflect the new month", async () => {
-    const initialStartMonth = new Date();
-    const newStartMonth = addMonths(new Date(), 2);
-    const { rerender } = render(
-      <DayPicker startMonth={initialStartMonth} mode="single" />
-    );
-    expect(grid(labelGrid(initialStartMonth))).toBeInTheDocument();
-    rerender(<DayPicker startMonth={newStartMonth} mode="single" />);
-    expect(grid(labelGrid(newStartMonth))).toBeInTheDocument();
-  });
-});
-
 test("extends the default locale", () => {
   render(
     <DayPicker

src/useCalendar.ts

@@ -1,5 +1,3 @@
-import { useEffect, useState } from "react";
-
 import type {
   CalendarWeek,
   CalendarDay,
@@ -14,6 +12,7 @@ import { getNavMonths } from "./helpers/getNavMonth.js";
 import { getNextMonth } from "./helpers/getNextMonth.js";
 import { getPreviousMonth } from "./helpers/getPreviousMonth.js";
 import { getWeeks } from "./helpers/getWeeks.js";
+import { useControlledValue } from "./helpers/useControlledValue.js";
 import type { DayPickerProps } from "./types/props.js";
 import type { DateLib } from "./types/shared.js";
 
@@ -94,23 +93,10 @@ export function useCalendar(
 
   const initialMonth = getInitialMonth(props, dateLib);
 
-  const [firstMonth, setFirstMonth] = useState(initialMonth);
-
-  // Update the displayed month if `month` changes
-  useEffect(() => {
-    const initialDisplayMonth = getInitialMonth(props, dateLib);
-    setFirstMonth(initialDisplayMonth);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [props.month]);
-
-  // Update the displayed month if start/end month changes
-  useEffect(() => {
-    // TOFIX: this effect should do nothing if the current firstMonth is between
-    // startMonth and endMonth
-    const initialDisplayMonth = getInitialMonth(props, dateLib);
-    setFirstMonth(initialDisplayMonth);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [props.startMonth, props.endMonth]);
+  const [firstMonth, setFirstMonth] = useControlledValue(
+    initialMonth,
+    props.month ? startOfMonth(props.month) : undefined
+  );
 
   /** The months displayed in the calendar. */
   const displayMonths = getDisplayMonths(firstMonth, navEnd, props, dateLib);