Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 5 additions & 13 deletions src/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -1392,20 +1392,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 });
}
};

Expand Down
53 changes: 51 additions & 2 deletions src/test/datepicker_test.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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(
<DatePicker
Expand All @@ -3867,7 +3867,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", () => {
Expand Down Expand Up @@ -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(
<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", () => {
Expand Down
Loading