Merge pull request #4955 from qburst/issue-4933/fix/default-keyboard-selected-on-next-view

Fix #4933: 🐛Remove the auto set of the '--keyboard-selected' class from the disabled dates while switching to the next or the previous view

Author: martijnrusschen

src/day.tsx

@@ -188,13 +188,20 @@ export default class Day extends Component<DayProps> {
       ? this.props.selectedDates?.some((date) => this.isSameDayOrWeek(date))
       : this.isSameDayOrWeek(this.props.selected);
 
-    return !isSelectedDate && this.isSameDayOrWeek(this.props.preSelection);
+    const isDisabled =
+      this.props.preSelection && this.isDisabled(this.props.preSelection);
+
+    return (
+      !isSelectedDate &&
+      this.isSameDayOrWeek(this.props.preSelection) &&
+      !isDisabled
+    );
   };
 
-  isDisabled = () =>
+  isDisabled = (day = this.props.day) =>
     // Almost all props previously were passed as this.props w/o proper typing with prop-types
     // after the migration to TS i made it explicit
-    isDayDisabled(this.props.day, {
+    isDayDisabled(day, {
       minDate: this.props.minDate,
       maxDate: this.props.maxDate,
       excludeDates: this.props.excludeDates,

src/month.tsx

@@ -819,7 +819,8 @@ export default class Month extends Component<MonthProps> {
         "react-datepicker__month-text--keyboard-selected":
           !this.props.disabledKeyboardNavigation &&
           preSelection &&
-          this.isSelectedMonth(day, m, preSelection),
+          this.isSelectedMonth(day, m, preSelection) &&
+          !this.isMonthDisabled(m),
         "react-datepicker__month-text--in-selecting-range":
           this.isInSelectingRangeMonth(m),
         "react-datepicker__month-text--in-range":
@@ -887,9 +888,17 @@ export default class Month extends Component<MonthProps> {
       selected,
       minDate,
       maxDate,
+      excludeDates,
+      includeDates,
+      filterDate,
       preSelection,
       disabledKeyboardNavigation,
     } = this.props;
+
+    const isDisabled =
+      (minDate || maxDate || excludeDates || includeDates || filterDate) &&
+      isQuarterDisabled(setQuarter(day, q), this.props);
+
     return clsx(
       "react-datepicker__quarter-text",
       `react-datepicker__quarter-${q}`,
@@ -903,7 +912,8 @@ export default class Month extends Component<MonthProps> {
         "react-datepicker__quarter-text--keyboard-selected":
           !disabledKeyboardNavigation &&
           preSelection &&
-          this.isSelectedQuarter(day, q, preSelection),
+          this.isSelectedQuarter(day, q, preSelection) &&
+          !isDisabled,
         "react-datepicker__quarter-text--in-selecting-range":
           this.isInSelectingRangeQuarter(q),
         "react-datepicker__quarter-text--in-range":

src/test/day_test.test.tsx

@@ -164,6 +164,17 @@ describe("Day", () => {
       ).toBe(true);
     });
 
+    it("should not apply the key-selected class when pre-selected is a part of disabled dates", () => {
+      const day = newDate();
+      const container = renderDay(day, {
+        excludeDates: [day],
+        preSelection: day,
+      });
+      const dayNode = container.querySelector(".react-datepicker__day")!;
+
+      expect(dayNode.classList.contains(className)).toBe(false);
+    });
+
     it("should not apply the keyboard-selected class when selected", () => {
       const day = newDate();
       const container = renderDay(day, { selected: day, preSelection: day });

src/test/month_test.test.tsx

@@ -2418,4 +2418,53 @@ describe("Month", () => {
       ).toBe(false);
     });
   });
+
+  describe("keyboard-selected", () => {
+    it("should not apply the keyboard-selected class when the month is a part of disabled dates", () => {
+      const keyboardSelectedDate = newDate("2024-06-03");
+      const excludeDates = [addWeeks(keyboardSelectedDate, 1)];
+
+      const { container } = render(
+        <Month
+          day={keyboardSelectedDate}
+          preSelection={keyboardSelectedDate}
+          excludeDates={excludeDates}
+          showMonthYearPicker
+        />,
+      );
+      expect(
+        container.querySelector(
+          ".react-datepicker__month-text--keyboard-selected",
+        ),
+      ).toBeNull();
+    });
+
+    it("should not apply the keyboard-selected class when the quarter is a part of disabled dates", () => {
+      const currentSelectedDate = newDate("2023-08-08");
+      const maxDate = newDate("2024-08-03");
+
+      const { container } = render(
+        <DatePicker
+          selected={currentSelectedDate}
+          maxDate={maxDate}
+          dateFormat="yyyy, QQQ"
+          showQuarterYearPicker
+        />,
+      );
+      const dateInput = container.querySelector("input")!;
+      fireEvent.focus(dateInput);
+
+      const calendar = container.querySelector(".react-datepicker")!;
+      const nextButton = calendar.querySelector(
+        ".react-datepicker__navigation--next",
+      )!;
+      fireEvent.click(nextButton);
+
+      expect(
+        container.querySelector(
+          ".react-datepicker__quarter-text--keyboard-selected",
+        ),
+      ).toBeNull();
+    });
+  });
 });

src/test/year_picker_test.test.tsx

@@ -603,6 +603,35 @@ describe("YearPicker", () => {
       );
       expect(allPreselectedYears.length).toBe(1);
     });
+
+    it("should not set the key-selected class when the year is a part of disabled dates", () => {
+      const date = newDate("2024-06-01");
+      const excludeDates = [newDate("2036-05-05")];
+
+      const { container } = render(
+        <DatePicker
+          selected={date}
+          excludeDates={excludeDates}
+          showYearPicker
+          dateFormat="yyyy"
+        />,
+      );
+
+      const dateInput = container.querySelector("input")!;
+      fireEvent.focus(dateInput);
+
+      const calendar = container.querySelector(".react-datepicker")!;
+      const nextButton = calendar.querySelector(
+        ".react-datepicker__navigation--next",
+      )!;
+      fireEvent.click(nextButton);
+
+      expect(
+        container.querySelector(
+          ".react-datepicker__year-text--keyboard-selected",
+        ),
+      ).toBeNull();
+    });
   });
 
   describe("Keyboard navigation", () => {

src/year.tsx

@@ -222,12 +222,21 @@ export default class Year extends Component<YearProps> {
     ) {
       return;
     }
+
+    const { minDate, maxDate, excludeDates, includeDates, filterDate } =
+      this.props;
+
     const date = getStartOfYear(setYear(this.props.date, y));
+    const isDisabled =
+      (minDate || maxDate || excludeDates || includeDates || filterDate) &&
+      isYearDisabled(y, this.props);
+
     return (
       !this.props.disabledKeyboardNavigation &&
       !this.props.inline &&
       !isSameDay(date, getStartOfYear(this.props.selected)) &&
-      isSameDay(date, getStartOfYear(this.props.preSelection))
+      isSameDay(date, getStartOfYear(this.props.preSelection)) &&
+      !isDisabled
     );
   };