🎨 Fix quarter selection style issue to avoid --keyboard-selected class to the selected element

- Updated the `isSelectedQuarter` method to properly compare the selected quarter.
- Introduced `isQuarterSelected` method to handle quarter selection logic.
- Added a test to ensure the keyboard-selected class is not applied when the quarter is part of the selected date.

Closes #5970

Author: balajis-qb

src/month.tsx

@@ -413,7 +413,7 @@ 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);
 
   isMonthSelected = () => {
     const { day, selected, selectedDates, selectsMultiple } = this.props;
@@ -428,6 +428,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;
@@ -953,6 +966,7 @@ export default class Month extends Component<MonthProps> {
           !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

@@ -2629,6 +2629,30 @@ 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();
+    });
   });
 
   describe("Auto-Focus", () => {