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(); + }); + }); });