From e15f7f008602995d4d9e1e89542001f94f9495ac Mon Sep 17 00:00:00 2001
From: Matt Driscoll <mdriscoll@esri.com>
Date: Mon, 1 Apr 2024 15:02:54 -0700
Subject: [PATCH] fix(panel): support cancelling the esc key event to prevent
 closing a panel.

---
 .../src/components/panel/panel.e2e.ts         | 24 +++++++++++++++++++
 .../src/components/panel/panel.tsx            | 12 ++++++----
 2 files changed, 31 insertions(+), 5 deletions(-)

diff --git a/packages/calcite-components/src/components/panel/panel.e2e.ts b/packages/calcite-components/src/components/panel/panel.e2e.ts
index a0e17688a43..e1708b73b32 100644
--- a/packages/calcite-components/src/components/panel/panel.e2e.ts
+++ b/packages/calcite-components/src/components/panel/panel.e2e.ts
@@ -400,4 +400,28 @@ describe("calcite-panel", () => {
     expect(await panel.getProperty("closed")).toBe(true);
     expect(await container.isVisible()).toBe(false);
   });
+
+  it("should not close when Escape key is prevented and closable is true", async () => {
+    const page = await newE2EPage();
+    await page.setContent("<calcite-panel closable>test</calcite-panel>");
+    const panel = await page.find("calcite-panel");
+    const container = await page.find(`calcite-panel >>> .${CSS.container}`);
+
+    expect(await panel.getProperty("closed")).toBe(false);
+    expect(await container.isVisible()).toBe(true);
+
+    await page.$eval("calcite-panel", (panel: HTMLCalcitePanelElement) => {
+      panel.addEventListener("keydown", (event) => {
+        if (event.key === "Escape") {
+          event.preventDefault();
+        }
+      });
+    });
+
+    await panel.press("Escape");
+    await page.waitForChanges();
+
+    expect(await panel.getProperty("closed")).toBe(false);
+    expect(await container.isVisible()).toBe(true);
+  });
 });
diff --git a/packages/calcite-components/src/components/panel/panel.tsx b/packages/calcite-components/src/components/panel/panel.tsx
index f7cb46b758a..dc3f9f2d2a3 100644
--- a/packages/calcite-components/src/components/panel/panel.tsx
+++ b/packages/calcite-components/src/components/panel/panel.tsx
@@ -4,6 +4,7 @@ import {
   Event,
   EventEmitter,
   h,
+  Host,
   Method,
   Prop,
   State,
@@ -602,7 +603,6 @@ export class Panel
         aria-busy={toAriaBoolean(loading)}
         class={CSS.container}
         hidden={closed}
-        onKeyDown={panelKeyDownHandler}
         tabIndex={closable ? 0 : -1}
         // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
         ref={this.setContainerRef}
@@ -614,10 +614,12 @@ export class Panel
     );
 
     return (
-      <InteractiveContainer disabled={disabled}>
-        {loading ? <calcite-scrim loading={loading} /> : null}
-        {panelNode}
-      </InteractiveContainer>
+      <Host onKeyDown={panelKeyDownHandler}>
+        <InteractiveContainer disabled={disabled}>
+          {loading ? <calcite-scrim loading={loading} /> : null}
+          {panelNode}
+        </InteractiveContainer>
+      </Host>
     );
   }
 }