diff --git a/src/test/year_picker_test.test.tsx b/src/test/year_picker_test.test.tsx
index ef5e16d91..fad491ec6 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(
+ ,
+ );
+
+ 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));
diff --git a/src/year.tsx b/src/year.tsx
index 5ac50998d..271c3f18b 100644
--- a/src/year.tsx
+++ b/src/year.tsx
@@ -218,26 +218,38 @@ export default class Year extends Component {
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
);
};