Repository: Hacker0x01/react-datepicker
Pull request #5621 (2025-05-12 05:21:31)

🐛 Add missing datepicker close call onPopperKeyDown event - to handle ESC keydown event outside the day component
## Description
**Linked issue**: #5520

**Problem**
As mentioned in the linked issue, the datepicker needs 2 esc key press to close.  This is not happening always.  If the control is there in any days, then one `ESC` key itself is closing the date picker.  But if it's there in the DatePicker header (For E.g., Previous or Next month navigation button), then the first `ESC` key will just move the focus back to the DatePicker Input and then second Esc key only will close the DatePicker.

**To Reproduce**
Steps to reproduce the behavior:

1. Go to a page with react-datepicker rendered.
2. Click on the input field to open the calendar and click back and next navigate button for more than one times.
3. Press Escape.
4. Observe that the calendar remains open (It just moves the focus to the input).
5. Press Escape again.
6. Calendar finally closes.


**Changes**
- Added the missing handleClose call to the `onPopperKeyDown` event handler
![image](https://github.com/user-attachments/assets/e91aef9a-4c5d-4feb-8e10-db2d049c88ff)

## Contribution checklist
- [x] I have followed the [contributing guidelines](https://github.com/Hacker0x01/react-datepicker/blob/main/CONTRIBUTING.md).
- [x] I have added sufficient test coverage for my changes.
- [x] I have formatted my code with Prettier and checked for linting issues with ESLint for code readability.



Patch:
diff --git a/src/index.tsx b/src/index.tsx
index eafa3765..ccd6ad99 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);
     }
   };
 


Test patch:
diff --git a/src/test/datepicker_test.test.tsx b/src/test/datepicker_test.test.tsx
index b4c64021..357f33a0 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(<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();
+    });
+  });
 });