Merge pull request #5972 from qburst/fix/quarter-picker-selector

QuarterYearPicker: align selected styling with other pickers and fix multi-select highlighting

Author: martijnrusschen

src/month.tsx

@@ -413,7 +413,12 @@ export default class Month extends Component<MonthProps> {
     );
 
   isSelectedQuarter = (day: Date, q: number, selected: Date): boolean =>
-    getQuarter(day) === q && getYear(day) === getYear(selected);
+    getQuarter(selected) === q && getYear(day) === getYear(selected);
+
+  isSelectQuarterInList = (day: Date, q: number, selectedDates: Date[]) =>
+    selectedDates.some((selectedDate) =>
+      this.isSelectedQuarter(day, q, selectedDate),
+    );
 
   isMonthSelected = () => {
     const { day, selected, selectedDates, selectsMultiple } = this.props;
@@ -428,6 +433,19 @@ export default class Month extends Component<MonthProps> {
     return !!selected && this.isSelectedMonth(day, monthIdx, selected);
   };
 
+  isQuarterSelected = () => {
+    const { day, selected, selectedDates, selectsMultiple } = this.props;
+    const quarterIdx = getQuarter(day);
+
+    if (selectsMultiple) {
+      return selectedDates?.some((selectedDate) =>
+        this.isSelectedQuarter(day, quarterIdx, selectedDate),
+      );
+    }
+
+    return !!selected && this.isSelectedQuarter(day, quarterIdx, selected);
+  };
+
   renderWeeks = () => {
     const weeks = [];
     const isFixedHeight = this.props.fixedHeight;
@@ -921,7 +939,6 @@ export default class Month extends Component<MonthProps> {
       day,
       startDate,
       endDate,
-      selected,
       minDate,
       maxDate,
       excludeDates,
@@ -941,18 +958,21 @@ export default class Month extends Component<MonthProps> {
         disabled) &&
       isQuarterDisabled(setQuarter(day, q), this.props);
 
+    const selection = this.getSelection();
+
     return clsx(
       "react-datepicker__quarter-text",
       `react-datepicker__quarter-${q}`,
       {
         "react-datepicker__quarter-text--disabled": isDisabled,
-        "react-datepicker__quarter-text--selected": selected
-          ? this.isSelectedQuarter(day, q, selected)
+        "react-datepicker__quarter-text--selected": selection
+          ? this.isSelectQuarterInList(day, q, selection)
           : undefined,
         "react-datepicker__quarter-text--keyboard-selected":
           !disabledKeyboardNavigation &&
           preSelection &&
           this.isSelectedQuarter(day, q, preSelection) &&
+          !this.isQuarterSelected() &&
           !isDisabled,
         "react-datepicker__quarter-text--in-selecting-range":
           this.isInSelectingRangeQuarter(q),

src/test/month_test.test.tsx

@@ -1202,6 +1202,56 @@ describe("Month", () => {
     });
 
     it("should have no axe violations", () => runAxe(monthComponent));
+
+    it("should apply the selected class when the quarter is a part of selected date", () => {
+      const selectedDate = newDate("2025-11-01");
+      const keyboardSelectedDate = selectedDate;
+
+      const { container } = render(
+        <Month
+          day={selectedDate}
+          selected={selectedDate}
+          preSelection={keyboardSelectedDate}
+          showQuarterYearPicker
+        />,
+      );
+
+      const selected = container.querySelector(
+        ".react-datepicker__quarter-text--selected",
+      );
+      expect(selected).not.toBeNull();
+      expect(selected?.textContent).toBe("Q4");
+    });
+
+    it("should apply the selected class when the quarter is a part of selected dates", () => {
+      const selectedDates = [newDate("2025-11-01"), newDate("2025-01-01")];
+      const keyboardSelectedDate = selectedDates[0];
+      const day = selectedDates[0] as Date;
+
+      const { container } = render(
+        <Month
+          day={day}
+          selectedDates={selectedDates}
+          preSelection={keyboardSelectedDate}
+          selectsMultiple
+          showQuarterYearPicker
+        />,
+      );
+
+      const selectedElements = Array.from(
+        container.querySelectorAll(".react-datepicker__quarter-text--selected"),
+      );
+      expect(selectedElements.length).toBe(selectedDates.length);
+
+      const expectedQuarterLabels = selectedDates.map(
+        (date) => `Q${getQuarter(date)}`,
+      );
+      expect(
+        expectedQuarterLabels.every((label) =>
+          selectedElements.some((element) => element?.textContent === label),
+        ),
+      ).toBe(true);
+    });
   });
 
   describe("if quarter is not selected", () => {
@@ -2629,6 +2679,56 @@ describe("Month", () => {
         ),
       ).toBeNull();
     });
+
+    it("should not apply the keyboard-selected class when the quarter is a part of selected date", () => {
+      const selectedDate = newDate("2025-11-01");
+      const keyboardSelectedDate = selectedDate;
+
+      const { container } = render(
+        <Month
+          day={selectedDate}
+          selected={selectedDate}
+          preSelection={keyboardSelectedDate}
+          showQuarterYearPicker
+        />,
+      );
+
+      const selected = container.querySelector(
+        ".react-datepicker__quarter-text--selected",
+      );
+      const keyboardSelected = container.querySelector(
+        ".react-datepicker__quarter-text--keyboard-selected",
+      );
+
+      expect(selected).not.toBeNull();
+      expect(keyboardSelected).toBeNull();
+    });
+
+    it("should not apply the keyboard-selected class when the quarter is a part of selected dates", () => {
+      const selectedDates = [newDate("2025-11-01")];
+      const keyboardSelectedDate = selectedDates[0];
+      const day = selectedDates[0] as Date;
+
+      const { container } = render(
+        <Month
+          day={day}
+          selectedDates={selectedDates}
+          preSelection={keyboardSelectedDate}
+          selectsMultiple
+          showQuarterYearPicker
+        />,
+      );
+
+      const selected = container.querySelector(
+        ".react-datepicker__quarter-text--selected",
+      );
+      const keyboardSelected = container.querySelector(
+        ".react-datepicker__quarter-text--keyboard-selected",
+      );
+
+      expect(selected).not.toBeNull();
+      expect(keyboardSelected).toBeNull();
+    });
   });
 
   describe("Auto-Focus", () => {