Merge pull request #6054 from Hacker0x01/fix/keyboard-focus-inline-navigation

Fix keyboard focus loss during same-month navigation in inline mode

Author: martijnrusschen

src/index.tsx

@@ -1395,20 +1395,12 @@ export class DatePicker extends Component<DatePickerProps, DatePickerState> {
       this.setSelected(newSelection);
     }
     this.setPreSelection(newSelection);
-    // need to figure out whether month has changed to focus day in inline version
+    // In inline mode, always set shouldFocusDayInline to true when navigating via keyboard.
+    // This ensures focus is properly transferred to the new day element regardless of
+    // whether the month changed. The user initiated this navigation from a focused day,
+    // so we should always focus the destination day.
     if (inline) {
-      const prevMonth = getMonth(copy);
-      const newMonth = getMonth(newSelection);
-      const prevYear = getYear(copy);
-      const newYear = getYear(newSelection);
-
-      if (prevMonth !== newMonth || prevYear !== newYear) {
-        // month has changed
-        this.setState({ shouldFocusDayInline: true });
-      } else {
-        // month hasn't changed
-        this.setState({ shouldFocusDayInline: false });
-      }
+      this.setState({ shouldFocusDayInline: true });
     }
   };
 

src/test/datepicker_test.test.tsx

@@ -3884,7 +3884,7 @@ describe("DatePicker", () => {
   describe("shouldFocusDayInline state", () => {
     const dateFormat = "yyyy-MM-dd";
 
-    it("should not be updated when navigating with ArrowRight key without changing displayed month", () => {
+    it("should be set to true when navigating with ArrowRight key without changing displayed month", () => {
       let instance: DatePicker | null = null;
       const { container } = render(
         <DatePicker
@@ -3900,7 +3900,8 @@ describe("DatePicker", () => {
       expect(selectedDayNode).toBeTruthy();
       fireEvent.keyDown(selectedDayNode!, getKey(KeyType.ArrowRight));
       expect(instance).toBeTruthy();
-      expect(instance!.state.shouldFocusDayInline).toBe(false);
+      // Always set to true for keyboard navigation to ensure focus transfers correctly
+      expect(instance!.state.shouldFocusDayInline).toBe(true);
     });
 
     it("should be set to true when changing displayed month with ArrowRight key", () => {
@@ -3940,6 +3941,54 @@ describe("DatePicker", () => {
       expect(instance).toBeTruthy();
       expect(instance!.state.shouldFocusDayInline).toBe(true);
     });
+
+    it("should maintain keyboard focus when navigating within same month in inline selectsRange mode with showPreviousMonths", () => {
+      // This test verifies the fix for GitHub issue #5750
+      // Focus was being lost when navigating within the same month in inline mode
+      // with selectsRange and showPreviousMonths enabled
+      const startDate = newDate("2025-06-01");
+      const endDate = newDate("2025-07-01");
+      const div = document.createElement("div");
+      document.body.appendChild(div);
+
+      const { container } = render(
+        <DatePicker
+          selectsRange
+          inline
+          showPreviousMonths
+          monthsShown={2}
+          startDate={startDate}
+          endDate={endDate}
+          openToDate={endDate}
+        />,
+        { container: div },
+      );
+
+      // Find the start date (June 1) and focus it
+      const startDateNode = container.querySelector(
+        '.react-datepicker__day--range-start[tabindex="0"]',
+      );
+      expect(startDateNode).toBeTruthy();
+      act(() => {
+        (startDateNode as HTMLElement)?.focus();
+      });
+      expect(document.activeElement).toBe(startDateNode);
+
+      // Navigate right (to June 2, same month)
+      fireEvent.keyDown(startDateNode!, getKey(KeyType.ArrowRight));
+
+      // After navigation, focus should be on June 2, not lost to body
+      const newFocusedDay = container.querySelector(
+        '.react-datepicker__day[tabindex="0"]',
+      );
+      expect(newFocusedDay).toBeTruthy();
+      expect(document.activeElement).not.toBe(document.body);
+      expect(
+        document.activeElement?.classList.contains("react-datepicker__day"),
+      ).toBe(true);
+
+      document.body.removeChild(div);
+    });
   });
 
   describe("Calendar Header Accessibility", () => {