fix(panel): support cancelling the esc key event to prevent closing a…

… panel (#9032) **Related Issue:** #9070 ## Summary - Moves keydown handler to the host so it can be properly cancelled - Add e2e test
Esri · Apr 5, 2024 · ecfa5f1 · ecfa5f1
1 parent 0998bf3
commit ecfa5f1
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 5 deletions.
diff --git 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
@@ -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>
     );
   }
 }