Merge pull request Hacker0x01#5621 from qburst/issue-5520/fix/fix-esc-handler

🐛 Add missing datepicker close call onPopperKeyDown event - to handle ESC keydown event outside the day component

Author: martijnrusschen

src/index.tsx

@@ -1170,6 +1170,7 @@ export default class DatePicker extends Component<
     if (eventKey === KeyType.Escape) {
       event.preventDefault();
       this.sendFocusBackToInput();
+      this.setOpen(false);
     }
   };
 

src/test/datepicker_test.test.tsx

@@ -4387,4 +4387,39 @@ describe("DatePicker", () => {
       expect(input.value).toBe(DATE_VALUE);
     });
   });
+
+  describe("Close on ESC Key", () => {
+    it("should close DatePicker on ESC key press", () => {
+      const { container } = render(<DatePicker />);
+      const input = safeQuerySelector(container, "input");
+
+      fireEvent.click(input);
+      const calendar = safeQuerySelector(container, ".react-datepicker");
+
+      fireEvent.keyDown(calendar, getKey(KeyType.Escape));
+
+      const calendarAfterEsc = container.querySelector(".react-datepicker");
+      expect(calendarAfterEsc).toBeFalsy();
+    });
+
+    it("should close DatePicker on ESC key press - even when the focus is at Calendar header buttons", () => {
+      const { container } = render(<DatePicker />);
+      const input = safeQuerySelector(container, "input");
+
+      fireEvent.click(input);
+      const calendar = safeQuerySelector(container, ".react-datepicker");
+      const nextMontButton = safeQuerySelector(
+        calendar,
+        "button.react-datepicker__navigation--next",
+      );
+
+      fireEvent.click(nextMontButton);
+      fireEvent.click(nextMontButton);
+
+      fireEvent.keyDown(nextMontButton, getKey(KeyType.Escape));
+
+      const calendarAfterEsc = container.querySelector(".react-datepicker");
+      expect(calendarAfterEsc).toBeFalsy();
+    });
+  });
 });