Repository: Hacker0x01/react-datepicker
Pull request #5670 (2025-06-02 07:16:25)

🐛 Enable --keyboard-selected class to the YearPicker irrespective of the availability of selected prop
## Description
**Linked issue**: #5669

**Problem**
As I mentioned in the ticket, we're not applying `--keyboard-selected` class over the active year of YearPicker, when there is no selected year set by default.

**Changes**
I just removed the guard that prevent applying  `--keyboard-selected` class when the `selected` prop is not available.

## Contribution checklist
- [x] I have followed the [contributing guidelines](https://github.com/Hacker0x01/react-datepicker/blob/main/CONTRIBUTING.md).
- [x] I have added sufficient test coverage for my changes.
- [x] I have formatted my code with Prettier and checked for linting issues with ESLint for code readability.



Patch:
diff --git a/src/year.tsx b/src/year.tsx
index 5ac50998..271c3f18 100644
--- a/src/year.tsx
+++ b/src/year.tsx
@@ -218,26 +218,38 @@ export default class Year extends Component<YearProps> {
 
   isKeyboardSelected = (y: number) => {
     if (
+      this.props.disabledKeyboardNavigation ||
       this.props.date === undefined ||
-      this.props.selected == null ||
       this.props.preSelection == null
     ) {
       return;
     }
 
-    const { minDate, maxDate, excludeDates, includeDates, filterDate } =
-      this.props;
+    const {
+      minDate,
+      maxDate,
+      excludeDates,
+      includeDates,
+      filterDate,
+      selected,
+    } = this.props;
 
     const date = getStartOfYear(setYear(this.props.date, y));
     const isDisabled =
       (minDate || maxDate || excludeDates || includeDates || filterDate) &&
       isYearDisabled(y, this.props);
 
+    const isSelectedDay =
+      !!selected && isSameDay(date, getStartOfYear(selected));
+    const isKeyboardSelectedDay = isSameDay(
+      date,
+      getStartOfYear(this.props.preSelection),
+    );
+
     return (
-      !this.props.disabledKeyboardNavigation &&
       !this.props.inline &&
-      !isSameDay(date, getStartOfYear(this.props.selected)) &&
-      isSameDay(date, getStartOfYear(this.props.preSelection)) &&
+      !isSelectedDay &&
+      isKeyboardSelectedDay &&
       !isDisabled
     );
   };


Test patch:
diff --git a/src/test/year_picker_test.test.tsx b/src/test/year_picker_test.test.tsx
index ef5e16d9..fad491ec 100644
--- a/src/test/year_picker_test.test.tsx
+++ b/src/test/year_picker_test.test.tsx
@@ -617,6 +617,23 @@ describe("YearPicker", () => {
   describe("keyboard-selected", () => {
     const className = "react-datepicker__year-text--keyboard-selected";
 
+    it("should set the key-selected class automatically to the current year when there is no selected date passed", () => {
+      const { container } = render(
+        <DatePicker showYearPicker dateFormat="yyyy" />,
+      );
+
+      const dateInput = safeQuerySelector(container, "input");
+      fireEvent.focus(dateInput);
+
+      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));