Fix #4483: Enable onKeyDown handler for the month picker view and the year picker view

src/calendar.jsx

@@ -894,6 +894,7 @@ export default class Calendar extends React.Component {
             monthClassName={this.props.monthClassName}
             onDayClick={this.handleDayClick}
             handleOnKeyDown={this.props.handleOnDayKeyDown}
+            handleOnMonthKeyDown={this.props.handleOnKeyDown}
             onDayMouseEnter={this.handleDayMouseEnter}
             onMouseLeave={this.handleMonthMouseLeave}
             onWeekSelect={this.props.onWeekSelect}

src/month.jsx

@@ -113,6 +113,7 @@ export default class Month extends React.Component {
     showQuarterYearPicker: PropTypes.bool,
     showWeekPicker: PropTypes.bool,
     handleOnKeyDown: PropTypes.func,
+    handleOnMonthKeyDown: PropTypes.func,
     isInputFocused: PropTypes.bool,
     weekAriaLabelPrefix: PropTypes.string,
     containerRef: PropTypes.oneOfType([
@@ -400,6 +401,7 @@ export default class Month extends React.Component {
       showTwoColumnMonthYearPicker,
       showFourColumnMonthYearPicker,
       setPreSelection,
+      handleOnMonthKeyDown,
     } = this.props;
     const eventKey = event.key;
     if (eventKey !== "Tab") {
@@ -451,6 +453,8 @@ export default class Month extends React.Component {
           break;
       }
     }
+
+    handleOnMonthKeyDown && handleOnMonthKeyDown(event);
   };
 
   onQuarterClick = (e, q) => {

src/year.jsx

@@ -29,6 +29,7 @@ export default class Year extends React.Component {
     includeDates: PropTypes.array,
     filterDate: PropTypes.func,
     yearItemNumber: PropTypes.number,
+    handleOnKeyDown: PropTypes.func,
   };
 
   constructor(props) {
@@ -157,6 +158,8 @@ export default class Year extends React.Component {
 
   onYearKeyDown = (e, y) => {
     const { key } = e;
+    const { handleOnKeyDown } = this.props;
+
     if (!this.props.disabledKeyboardNavigation) {
       switch (key) {
         case "Enter":
@@ -177,6 +180,8 @@ export default class Year extends React.Component {
           break;
       }
     }
+
+    handleOnKeyDown && handleOnKeyDown(e);
   };
 
   getYearClassNames = (y) => {

test/month_test.test.js

@@ -1,6 +1,8 @@
 import React from "react";
+import { render, fireEvent } from "@testing-library/react";
 import Month from "../src/month";
 import Day from "../src/day";
+import DatePicker from "../src";
 import range from "lodash/range";
 import { mount, shallow } from "enzyme";
 import * as utils from "../src/date_utils";
@@ -935,6 +937,30 @@ describe("Month", () => {
         ).toBe(false);
       });
     });
+
+    it("should call onKeyDown handler on any key press", () => {
+      const onKeyDownSpy = jest.fn();
+
+      const { container } = render(
+        <DatePicker
+          selected={new Date()}
+          dateFormat="MM/yyyy"
+          showMonthYearPicker
+          onKeyDown={onKeyDownSpy}
+        />,
+      );
+
+      const dateInput = container.querySelector("input");
+      fireEvent.focus(dateInput);
+
+      const month = container.querySelector(".react-datepicker__month-0");
+
+      fireEvent.keyDown(month, {
+        key: "ArrowDown",
+      });
+
+      expect(onKeyDownSpy).toHaveBeenCalledTimes(1);
+    });
   });
 
   describe("Keyboard navigation", () => {

test/year_picker_test.test.js

@@ -4,6 +4,7 @@ import DatePicker from "../src/index.jsx";
 import Year from "../src/year.jsx";
 import TestUtils from "react-dom/test-utils";
 import ReactDOM from "react-dom";
+import { render, fireEvent } from "@testing-library/react";
 import * as utils from "../src/date_utils.js";
 import Calendar from "../src/calendar.jsx";
 import { getKey } from "./test_utils.js";
@@ -599,6 +600,30 @@ describe("YearPicker", () => {
       expect(utils.getYear(selectedDay)).toBe(2021);
     });
 
+    it("should call onKeyDown handler on any key press", () => {
+      const onKeyDownSpy = jest.fn();
+
+      const { container } = render(
+        <DatePicker
+          selected={new Date()}
+          showYearPicker
+          dateFormat="yyyy"
+          onKeyDown={onKeyDownSpy}
+        />,
+      );
+
+      const dateInput = container.querySelector("input");
+      fireEvent.focus(dateInput);
+
+      const year = container.querySelector(".react-datepicker__year-text");
+
+      fireEvent.keyDown(year, {
+        key: "ArrowDown",
+      });
+
+      expect(onKeyDownSpy).toHaveBeenCalledTimes(1);
+    });
+
     it("should select 2021 when Space key is pressed", () => {
       const yearPicker = getPicker("2021-01-01");