backdrop click on modal closes the modal

NiceNode · Aug 25, 2024 · 35d2226 · 35d2226
1 parent abf5dd1
commit 35d2226
Showing 1 changed file with 11 additions and 1 deletion.
diff --git a/src/renderer/Generics/redesign/Modal/Modal.tsx b/src/renderer/Generics/redesign/Modal/Modal.tsx
@@ -102,8 +102,18 @@ export const Modal = ({
     return () => {};
   }, []);
 
+  const handleBackdropClick = useCallback(
+    (event: React.MouseEvent<HTMLDivElement>) => {
+      // Check if the click target is the backdrop itself
+      if (event.target === event.currentTarget) {
+        modalOnClose();
+      }
+    },
+    [modalOnClose],
+  );
+
   return (
-    <div className={modalBackdropStyle}>
+    <div className={modalBackdropStyle} onClick={handleBackdropClick}>
       <div className={[modalContentStyle, modalStyle].join(' ')}>
         {modalType === 'modal' && (
           <ContentHeader