fix modal close with esc key and body overflow

basher · Apr 21, 2024 · 24fe08c · 24fe08c
1 parent 112e174
commit 24fe08c
Showing 1 changed file with 10 additions and 0 deletions.
diff --git a/ui/src/javascript/web-components/webui-modal.ts b/ui/src/javascript/web-components/webui-modal.ts
@@ -53,6 +53,12 @@ export default class WebUIModal extends HTMLElement {
         }
     }
 
+    private handleGlobalKeyup(e: KeyboardEvent): void {
+        if (e.code === 'Escape') {
+            document.body.classList.remove(this.classNameModalOpen);
+        }
+    }
+
     // Handle constructor() event listeners.
     public handleEvent(e: MouseEvent) {
         const target = e.currentTarget as HTMLButtonElement;
@@ -73,12 +79,16 @@ export default class WebUIModal extends HTMLElement {
 
     // Handle (global) event listeners which are not part of this web component.
     public connectedCallback() {
+        document.addEventListener('keyup', (e: KeyboardEvent) =>
+            this.handleGlobalKeyup(e),
+        );
         document.addEventListener('click', (e: MouseEvent) =>
             this.handleGlobalClick(e),
         );
     }
 
     public disconnectedCallback() {
+        document.removeEventListener('keyup', this.handleGlobalKeyup);
         document.removeEventListener('click', this.handleGlobalClick);
     }
 }