fix: setting defaultMonth the next year when using the dropdown mode does not render the calendar (#2783)

* Use computed navStart and navEnd values instead of props

* Add InvalidMonthDefaultLimit example

* Add InvalidMonthDefaultLimit tests

* Refactor code

* Update tests

* Fix typo

* Fix TS issue

Author: rodgobbi

examples/InvalidMonthDefaultLimit.test.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+
+import { grid } from "@/test/elements";
+import { render } from "@/test/render";
+
+import { InvalidMonthDefaultLimit } from "./InvalidMonthDefaultLimit";
+
+test("should display calendar in December", () => {
+  render(<InvalidMonthDefaultLimit />);
+  expect(grid()).toHaveAccessibleName(`December ${new Date().getFullYear()}`);
+});

examples/InvalidMonthDefaultLimit.tsx

@@ -0,0 +1,19 @@
+import React, { useState } from "react";
+
+import { DayPicker } from "react-day-picker";
+
+export function InvalidMonthDefaultLimit() {
+  const [month, setMonth] = useState(() => {
+    const date = new Date();
+    date.setFullYear(date.getFullYear() + 1);
+    return date;
+  });
+
+  return (
+    <DayPicker
+      month={month}
+      onMonthChange={setMonth}
+      captionLayout="dropdown"
+    />
+  );
+}

examples/index.ts

@@ -36,6 +36,7 @@ export * from "./Input";
 export * from "./InputRange";
 export * from "./InputTime";
 export * from "./InvalidMonth";
+export * from "./InvalidMonthDefaultLimit";
 export * from "./ItalianLabels";
 export * from "./ItalianLabels";
 export * from "./Keyboard";

src/DayPicker.tsx

@@ -160,7 +160,13 @@ export function DayPicker(initialProps: DayPickerProps) {
     goToMonth
   } = calendar;
 
-  const getModifiers = createGetModifiers(days, props, dateLib);
+  const getModifiers = createGetModifiers(
+    days,
+    props,
+    navStart,
+    navEnd,
+    dateLib
+  );
 
   const {
     isSelected,

src/helpers/createGetModifiers.test.ts

@@ -40,7 +40,13 @@ const props = {
 
 describe("createGetModifiers", () => {
   describe("default props", () => {
-    const getModifiers = createGetModifiers(days, props, dateLib);
+    const getModifiers = createGetModifiers(
+      days,
+      props,
+      undefined,
+      undefined,
+      dateLib
+    );
 
     test("return the modifiers for a given day", () => {
       const modifiers = getModifiers(day2);
@@ -114,7 +120,9 @@ describe("createGetModifiers", () => {
 
     const getModifiers = createGetModifiers(
       days,
-      { ...props, startMonth, endMonth },
+      props,
+      startMonth,
+      endMonth,
       dateLib
     );
     test("return the modifiers for a given day", () => {

src/helpers/createGetModifiers.ts

@@ -19,6 +19,8 @@ import { dateMatchModifiers } from "../utils/dateMatchModifiers.js";
 export function createGetModifiers(
   days: CalendarDay[],
   props: DayPickerProps,
+  navStart: Date | undefined,
+  navEnd: Date | undefined,
   dateLib: DateLib
 ) {
   const {
@@ -39,8 +41,8 @@ export function createGetModifiers(
     isAfter
   } = dateLib;
 
-  const startMonth = props.startMonth && startOfMonth(props.startMonth);
-  const endMonth = props.endMonth && endOfMonth(props.endMonth);
+  const computedNavStart = navStart && startOfMonth(navStart);
+  const computedNavEnd = navEnd && endOfMonth(navEnd);
 
   const internalModifiersMap: Record<DayFlag, CalendarDay[]> = {
     [DayFlag.focused]: [],
@@ -57,20 +59,22 @@ export function createGetModifiers(
 
     const isOutside = Boolean(displayMonth && !isSameMonth(date, displayMonth));
 
-    const isBeforeStartMonth = Boolean(
-      startMonth && isBefore(date, startMonth)
+    const isBeforeNavStart = Boolean(
+      computedNavStart && isBefore(date, computedNavStart)
     );
 
-    const isAfterEndMonth = Boolean(endMonth && isAfter(date, endMonth));
+    const isAfterNavEnd = Boolean(
+      computedNavEnd && isAfter(date, computedNavEnd)
+    );
 
     const isDisabled = Boolean(
       disabled && dateMatchModifiers(date, disabled, dateLib)
     );
 
     const isHidden =
       Boolean(hidden && dateMatchModifiers(date, hidden, dateLib)) ||
-      isBeforeStartMonth ||
-      isAfterEndMonth ||
+      isBeforeNavStart ||
+      isAfterNavEnd ||
       // Broadcast calendar will show outside days as default
       (!broadcastCalendar && !showOutsideDays && isOutside) ||
       (broadcastCalendar && showOutsideDays === false && isOutside);

src/helpers/getInitialMonth.test.ts

@@ -6,7 +6,12 @@ import { getInitialMonth } from "./getInitialMonth";
 
 it("return start of month", () => {
   const month = new Date(2010, 11, 12);
-  const initialMonth = getInitialMonth({ month }, defaultDateLib);
+  const initialMonth = getInitialMonth(
+    { month },
+    undefined,
+    undefined,
+    defaultDateLib
+  );
   expect(isSameDay(initialMonth, startOfMonth(month))).toBe(true);
 });
 
@@ -18,6 +23,8 @@ describe("when no startMonth or endMonth is given", () => {
     it("return that month", () => {
       const initialMonth = getInitialMonth(
         { month, defaultMonth, today },
+        undefined,
+        undefined,
         defaultDateLib
       );
       expect(isSameMonth(initialMonth, month)).toBe(true);
@@ -27,14 +34,21 @@ describe("when no startMonth or endMonth is given", () => {
     it("return that month", () => {
       const initialMonth = getInitialMonth(
         { defaultMonth, today },
+        undefined,
+        undefined,
         defaultDateLib
       );
       expect(isSameMonth(initialMonth, defaultMonth)).toBe(true);
     });
   });
   describe("when no month or defaultMonth", () => {
     it("return the today month", () => {
-      const initialMonth = getInitialMonth({ today }, defaultDateLib);
+      const initialMonth = getInitialMonth(
+        { today },
+        undefined,
+        undefined,
+        defaultDateLib
+      );
       expect(isSameMonth(initialMonth, today)).toBe(true);
     });
   });
@@ -45,7 +59,9 @@ describe("when startMonth is given and is after the default initial month", () =
     const month = new Date(2010, 11, 12);
     const startMonth = addMonths(month, 1);
     const initialMonth = getInitialMonth(
-      { month, numberOfMonths: 3, startMonth },
+      { month, numberOfMonths: 3 },
+      startMonth,
+      undefined,
       defaultDateLib
     );
     expect(isSameMonth(initialMonth, startMonth)).toBe(true);
@@ -59,7 +75,9 @@ describe("when endMonth is given", () => {
     describe("when the number of month is 1", () => {
       it("return the endMonth", () => {
         const initialMonth = getInitialMonth(
-          { month, endMonth },
+          { month },
+          undefined,
+          endMonth,
           defaultDateLib
         );
         expect(isSameMonth(initialMonth, endMonth)).toBe(true);
@@ -68,7 +86,9 @@ describe("when endMonth is given", () => {
     describe("when the number of month is 3", () => {
       it("return the endMonth plus the number of months", () => {
         const initialMonth = getInitialMonth(
-          { month, numberOfMonths: 3, endMonth },
+          { month, numberOfMonths: 3 },
+          undefined,
+          endMonth,
           defaultDateLib
         );
         const expectedMonth = addMonths(endMonth, -1 * (3 - 1));

src/helpers/getInitialMonth.ts

@@ -17,35 +17,33 @@ export function getInitialMonth(
     DayPickerProps,
     | "fromYear"
     | "toYear"
-    | "startMonth"
-    | "endMonth"
     | "month"
     | "defaultMonth"
     | "today"
     | "numberOfMonths"
     | "timeZone"
   >,
+  navStart: Date | undefined,
+  navEnd: Date | undefined,
   dateLib: DateLib
 ): Date {
   const {
     month,
     defaultMonth,
     today = dateLib.today(),
-    numberOfMonths = 1,
-    endMonth,
-    startMonth
+    numberOfMonths = 1
   } = props;
   let initialMonth = month || defaultMonth || today;
   const { differenceInCalendarMonths, addMonths, startOfMonth } = dateLib;
 
-  // Adjust the initial month if it is after the endMonth
-  if (endMonth && differenceInCalendarMonths(endMonth, initialMonth) < 0) {
+  // Adjust the initial month if it is after the navEnd
+  if (navEnd && differenceInCalendarMonths(navEnd, initialMonth) < 0) {
     const offset = -1 * (numberOfMonths - 1);
-    initialMonth = addMonths(endMonth, offset);
+    initialMonth = addMonths(navEnd, offset);
   }
-  // Adjust the initial month if it is before the startMonth
-  if (startMonth && differenceInCalendarMonths(initialMonth, startMonth) < 0) {
-    initialMonth = startMonth;
+  // Adjust the initial month if it is before the navStart
+  if (navStart && differenceInCalendarMonths(initialMonth, navStart) < 0) {
+    initialMonth = navStart;
   }
 
   return startOfMonth(initialMonth);

src/useCalendar.ts

@@ -101,15 +101,15 @@ export function useCalendar(
   const [navStart, navEnd] = getNavMonths(props, dateLib);
 
   const { startOfMonth, endOfMonth } = dateLib;
-  const initialMonth = getInitialMonth(props, dateLib);
+  const initialMonth = getInitialMonth(props, navStart, navEnd, dateLib);
   const [firstMonth, setFirstMonth] = useControlledValue(
     initialMonth,
     // initialMonth is always computed from props.month if provided
     props.month ? initialMonth : undefined
   );
 
   useEffect(() => {
-    const newInitialMonth = getInitialMonth(props, dateLib);
+    const newInitialMonth = getInitialMonth(props, navStart, navEnd, dateLib);
     setFirstMonth(newInitialMonth);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [props.timeZone]);