🐛 Apply --keyboard-selected to <Month /> only if it's not already selected

Updated --keyboard-selected applying condition similar to <Day /> component

Closes #5643

Author: balajis-qb

src/month.tsx

@@ -413,6 +413,19 @@ export default class Month extends Component<MonthProps> {
   isSelectedQuarter = (day: Date, q: number, selected: Date): boolean =>
     getQuarter(day) === q && getYear(day) === getYear(selected);
 
+  isMonthSelected = () => {
+    const { day, selected, selectedDates, selectsMultiple } = this.props;
+    const monthIdx = getMonth(day);
+
+    if (selectsMultiple) {
+      return selectedDates?.some((date) =>
+        this.isSelectedMonth(day, monthIdx, date),
+      );
+    }
+
+    return !!selected && this.isSelectedMonth(day, monthIdx, selected);
+  };
+
   renderWeeks = () => {
     const weeks = [];
     const isFixedHeight = this.props.fixedHeight;
@@ -821,6 +834,7 @@ export default class Month extends Component<MonthProps> {
           !this.props.disabledKeyboardNavigation &&
           preSelection &&
           this.isSelectedMonth(day, m, preSelection) &&
+          !this.isMonthSelected() &&
           !this.isMonthDisabled(m),
         "react-datepicker__month-text--in-selecting-range":
           this.isInSelectingRangeMonth(m),

src/test/month_test.test.tsx

@@ -2552,6 +2552,30 @@ describe("Month", () => {
       ).toBeNull();
     });
 
+    it("should not apply the keyboard-selected class when the month is a part of selected dates", () => {
+      const selectedDate = newDate("2024-06-03");
+      const keyboardSelectedDate = selectedDate;
+
+      const { container } = render(
+        <Month
+          day={selectedDate}
+          selected={selectedDate}
+          preSelection={keyboardSelectedDate}
+          showMonthYearPicker
+        />,
+      );
+
+      const selected = container.querySelector(
+        ".react-datepicker__month-text--selected",
+      );
+      const keyboardSelected = container.querySelector(
+        ".react-datepicker__month-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 disabled dates", () => {
       const currentSelectedDate = newDate("2023-08-08");
       const maxDate = newDate("2024-08-03");