✨ Fix quarter selection style issue for selectsMultiple

- Introduced `isSelectQuarterInList` method to handle selection of multiple quarters.
- Updated the rendering logic to apply the selected class based on the new method.
- Added tests to verify correct application of the selected class for both single and multiple selected dates.

Closes #5971

Author: balajis-qb

src/month.tsx

@@ -415,6 +415,11 @@ export default class Month extends Component<MonthProps> {
   isSelectedQuarter = (day: Date, q: number, selected: Date): boolean =>
     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;
     const monthIdx = getMonth(day);
@@ -934,7 +939,6 @@ export default class Month extends Component<MonthProps> {
       day,
       startDate,
       endDate,
-      selected,
       minDate,
       maxDate,
       excludeDates,
@@ -954,13 +958,15 @@ 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 &&

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", () => {
@@ -2653,6 +2703,32 @@ describe("Month", () => {
       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", () => {