From 0661e58bdfd81c26d17467b8f6d36c643749cbe4 Mon Sep 17 00:00:00 2001
From: balajis-qb <balaji.s@qburst.com>
Date: Sat, 10 May 2025 19:17:41 +0530
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Add=20missing=20datepicker=20clo?=
 =?UTF-8?q?se=20call=20onPopperKeyDown=20event=20-=20to=20handle=20esc=20k?=
 =?UTF-8?q?eydown=20event=20outside=20the=20day=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Closes #5520
---
 src/index.tsx                     |  1 +
 src/test/datepicker_test.test.tsx | 35 +++++++++++++++++++++++++++++++
 2 files changed, 36 insertions(+)

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