diff --git a/src/index.tsx b/src/index.tsx index e982237a7..6ddd4d138 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1392,20 +1392,12 @@ export class DatePicker extends Component { 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 }); } }; diff --git a/src/test/datepicker_test.test.tsx b/src/test/datepicker_test.test.tsx index 10a58a83d..63fd95e28 100644 --- a/src/test/datepicker_test.test.tsx +++ b/src/test/datepicker_test.test.tsx @@ -3851,7 +3851,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( { 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", () => { @@ -3907,6 +3908,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( + , + { 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", () => {