From f0847bf1aafa16bb3120b00d5f3606e69432ac9c Mon Sep 17 00:00:00 2001 From: balajis-qb Date: Mon, 29 Jun 2026 17:21:05 +0530 Subject: [PATCH] fix(yearpicker): remove inline restriction for keyboard-selected state YearPicker was not applying the `react-datepicker__day--keyboard-selected` class during keyboard navigation when rendered in inline mode. The issue was caused by an unnecessary `!inline` check in `isKeyboardSelected`, which prevented the keyboard-selected state from being applied even when navigation was active. Removing this condition restores consistent behavior across: - Default DatePicker - MonthPicker - YearPicker (showYearPicker) Keyboard navigation now correctly highlights the focused year in inline mode. Closes #6297 --- src/test/year_picker_test.test.tsx | 14 ++++++++++++++ src/year.tsx | 7 +------ 2 files changed, 15 insertions(+), 6 deletions(-) diff --git a/src/test/year_picker_test.test.tsx b/src/test/year_picker_test.test.tsx index 6721abcd2f..8ecab2ce9e 100644 --- a/src/test/year_picker_test.test.tsx +++ b/src/test/year_picker_test.test.tsx @@ -634,6 +634,20 @@ describe("YearPicker", () => { expect(selectedYear?.textContent).toBe(`${currentYear}`); }); + it("should set the key-selected class (pre-select) automatically to the current year when there is no selected date passed - in the Inline Mode", () => { + const { container } = render( + , + ); + + const selectedYear = container.querySelector( + ".react-datepicker__year-text--keyboard-selected", + ); + expect(selectedYear).toBeDefined(); + + const currentYear = new Date().getFullYear(); + expect(selectedYear?.textContent).toBe(`${currentYear}`); + }); + it("should set the date to the selected year of the previous period when previous button clicked", () => { let date: Date | null; const expectedDate = getStartOfYear(setYear(newDate(), 2008)); diff --git a/src/year.tsx b/src/year.tsx index 36b363d430..8e05674d86 100644 --- a/src/year.tsx +++ b/src/year.tsx @@ -250,12 +250,7 @@ export default class Year extends Component { getStartOfYear(this.props.preSelection), ); - return ( - !this.props.inline && - !isSelectedDay && - isKeyboardSelectedDay && - !isDisabled - ); + return !isSelectedDay && isKeyboardSelectedDay && !isDisabled; }; isSelectedYear = (year: number) => {