diff --git a/src/index.tsx b/src/index.tsx
index eafa37658..ccd6ad996 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1170,6 +1170,7 @@ export default class DatePicker extends Component<
if (eventKey === KeyType.Escape) {
event.preventDefault();
this.sendFocusBackToInput();
+ this.setOpen(false);
}
};
diff --git a/src/test/datepicker_test.test.tsx b/src/test/datepicker_test.test.tsx
index b4c64021d..357f33a04 100644
--- a/src/test/datepicker_test.test.tsx
+++ b/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();
+ 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();
+ 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();
+ });
+ });
});