From a8f4b99306095e4a9a6c5ba0a29d7caccb79c844 Mon Sep 17 00:00:00 2001
From: balajis-qb <balaji.s@qburst.com>
Date: Sun, 25 May 2025 16:36:28 +0530
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Apply=20--keyboard-selected=20to?=
 =?UTF-8?q?=20<Month=20/>=20only=20if=20it's=20not=20already=20selected?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

Closes #5643
---
 src/month.tsx                | 14 ++++++++++
 src/test/month_test.test.tsx | 50 ++++++++++++++++++++++++++++++++++++
 2 files changed, 64 insertions(+)

diff --git a/src/month.tsx b/src/month.tsx
index 0e74525c8f..b5370d95cf 100644
--- a/src/month.tsx
+++ b/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),
diff --git a/src/test/month_test.test.tsx b/src/test/month_test.test.tsx
index 2885aae645..d793669f9a 100644
--- a/src/test/month_test.test.tsx
+++ b/src/test/month_test.test.tsx
@@ -2552,6 +2552,56 @@ describe("Month", () => {
       ).toBeNull();
     });
 
+    it("should not apply the keyboard-selected class when the month is a part of selected date", () => {
+      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 month is a part of selected dates", () => {
+      const selectedDates = [newDate("2024-06-03")];
+      const keyboardSelectedDate = selectedDates[0];
+      const day = selectedDates[0] as Date;
+
+      const { container } = render(
+        <Month
+          day={day}
+          selectedDates={selectedDates}
+          preSelection={keyboardSelectedDate}
+          selectsMultiple
+          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");