fix: modal closing behavior with a file input

dev/main.ts

@@ -689,6 +689,7 @@ class DevApp extends LitElement {
             label="Modal Text Input"
             placeholder="Type something..."
           ></trailhand-text-input>
+          <input type="file" />
         </div>
         <div slot="footer">
           <trailhand-button @click=${() => (this.modalOpen = false)}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@krumio/trailhand-ui",
-  "version": "1.9.20",
+  "version": "1.9.21",
   "type": "module",
   "description": "Reusable web components built with Lit Element",
   "main": "./dist/index.js",

src/components/modal/modal.stories.ts

@@ -225,18 +225,16 @@ export const DispatchesCloseEventOnEscape: Story = {
   },
   args: {
     open: true,
+    dismissible: true,
   },
   play: async ({ canvasElement }) => {
     const modal = canvasElement.querySelector('trailhand-modal') as Modal;
-    const dialog = modal.shadowRoot?.querySelector(
-      'dialog',
-    ) as HTMLDialogElement;
 
     const onCloseMock = fn();
     modal.addEventListener('modal-close', onCloseMock);
 
-    const cancelEvent = new Event('cancel', { bubbles: true, composed: true });
-    dialog.dispatchEvent(cancelEvent);
+    // simulate ESC key
+    window.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
 
     await expect(modal.open).toBe(false);
     await expect(onCloseMock).toHaveBeenCalled();

src/components/modal/modal.ts

@@ -163,6 +163,28 @@ export class Modal extends LitElement {
     this.open = false;
   }
 
+  private handleCancel(e: Event) {
+    e.preventDefault();
+  }
+
+  private handleKeydown = (e: KeyboardEvent) => {
+    if (!this.open) return;
+
+    if (e.key === 'Escape' && this.dismissible) {
+      this.handleClose();
+    }
+  };
+
+  connectedCallback() {
+    super.connectedCallback();
+    window.addEventListener('keydown', this.handleKeydown);
+  }
+
+  disconnectedCallback() {
+    window.removeEventListener('keydown', this.handleKeydown);
+    super.disconnectedCallback();
+  }
+
   private handleBackdropClick(e: MouseEvent) {
     if (!this.dismissible) return;
     const rect = this.dialog.getBoundingClientRect();
@@ -178,7 +200,7 @@ export class Modal extends LitElement {
     return html`
       <dialog
         @click=${this.handleBackdropClick}
-        @cancel=${this.handleClose}
+        @cancel=${this.handleCancel}
         aria-labelledby="modal-title"
         aria-modal="true"
         part="dialog"