[feat] added escape to close functionality

jordan-dalby · Jan 5, 2025 · 8adc608 · 8adc608
1 parent ad57bec
commit 8adc608
Showing 1 changed file with 8 additions and 0 deletions.
diff --git a/client/src/components/common/modals/Modal.tsx b/client/src/components/common/modals/Modal.tsx
@@ -36,9 +36,16 @@ const Modal: React.FC<ModalProps> = ({
       }
     };
 
+    const handleEscapeKey = (event: KeyboardEvent) => {
+      if (event.key === 'Escape' && isOpen) {
+        onClose();
+      }
+    };
+
     if (isOpen) {
       document.body.style.overflow = 'hidden';
       document.addEventListener('mousedown', handleClickOutside);
+      document.addEventListener('keydown', handleEscapeKey);
       if (contentRef.current) {
         contentRef.current.scrollTop = 0;
       }
@@ -47,6 +54,7 @@ const Modal: React.FC<ModalProps> = ({
     return () => {
       document.body.style.overflow = 'unset';
       document.removeEventListener('mousedown', handleClickOutside);
+      document.removeEventListener('keydown', handleEscapeKey);
     };
   }, [isOpen, onClose]);