fix(dialog): fix escapeDisabled when the escape key is pressed on the…

… panel (#10097) **Related Issue:** #10080 ## Summary - panel doesn't have an escapeDisabled property - uses preventDefault to stop escape key from closing panel which closes dialog - adds test
Esri · Aug 17, 2024 · 9a5f1f1 · 9a5f1f1
1 parent 3aa47a4
commit 9a5f1f1
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 1,593 deletions.
diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts
@@ -1692,7 +1692,8 @@ export namespace Components {
          */
         "embedded": boolean;
         /**
-          * When `true`, disables the default close on escape behavior.  By default, an open dialog can be dismissed by pressing the Esc key. Depending on what the dialog represents, it may not be desired for this behavior.  See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog#accessibility
+          * When `true`, disables the default close on escape behavior.  By default, an open dialog can be dismissed by pressing the Esc key.
+          * @see [Dialog Accessibility](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog#accessibility)
          */
         "escapeDisabled": boolean;
         /**
@@ -9700,7 +9701,8 @@ declare namespace LocalJSX {
          */
         "embedded"?: boolean;
         /**
-          * When `true`, disables the default close on escape behavior.  By default, an open dialog can be dismissed by pressing the Esc key. Depending on what the dialog represents, it may not be desired for this behavior.  See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog#accessibility
+          * When `true`, disables the default close on escape behavior.  By default, an open dialog can be dismissed by pressing the Esc key.
+          * @see [Dialog Accessibility](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog#accessibility)
          */
         "escapeDisabled"?: boolean;
         /**

diff --git a/packages/calcite-components/src/components/dialog/dialog.e2e.ts b/packages/calcite-components/src/components/dialog/dialog.e2e.ts
@@ -330,17 +330,18 @@ describe("calcite-dialog", () => {
     await page.waitForChanges();
 
     const dialog = await page.find("calcite-dialog");
+    const panel = await page.find(`calcite-dialog >>> calcite-panel`);
     expect(await dialog.getProperty("open")).toBe(true);
 
-    await page.keyboard.press("Escape");
+    await panel.press("Escape");
     await page.waitForChanges();
 
     expect(await dialog.getProperty("open")).toBe(true);
 
     dialog.setProperty("escapeDisabled", false);
     await page.waitForChanges();
 
-    await page.keyboard.press("Escape");
+    await panel.press("Escape");
     await page.waitForChanges();
 
     expect(await dialog.getProperty("open")).toBe(false);

diff --git a/packages/calcite-components/src/components/dialog/dialog.tsx b/packages/calcite-components/src/components/dialog/dialog.tsx
@@ -258,6 +258,7 @@ export class Dialog
                 messageOverrides={this.messageOverrides}
                 onCalcitePanelClose={this.handleCloseClick}
                 onCalcitePanelScroll={this.handleScroll}
+                onKeyDown={this.handlePanelKeyDown}
                 overlayPositioning={this.overlayPositioning}
                 ref={(el) => (this.panelEl = el)}
                 scale={this.scale}
@@ -461,10 +462,16 @@ export class Dialog
     this.calciteDialogScroll.emit();
   };
 
-  private handleCloseClick = () => {
+  private handleCloseClick = (): void => {
     this.open = false;
   };
 
+  private handlePanelKeyDown = (event: KeyboardEvent): void => {
+    if (this.escapeDisabled) {
+      event.preventDefault();
+    }
+  };
+
   private async openDialog(): Promise<void> {
     await componentOnReady(this.el);
     this.el.addEventListener("calciteDialogOpen", this.openEnd);