[ui] fix modals closing unintentionally

uwu · Aug 8, 2024 · c836466 · c836466
1 parent 2e3ddb6
commit c836466
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 3 deletions.
diff --git a/packages/shelter-ui/src/modals.tsx.scss b/packages/shelter-ui/src/modals.tsx.scss
@@ -29,6 +29,12 @@ $RADIUS: 4px;
   }
 }
 
+.backdrop {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+}
+
 .wrap {
   transition-property: opacity, transform;
   transition-duration: 250ms;

diff --git a/packages/shelter-ui/src/openModal.tsx b/packages/shelter-ui/src/openModal.tsx
@@ -22,6 +22,7 @@ const ModalRoot: Component = () => {
   ensureInternalStyle(css);
 
   let dialogEl;
+  let backdropEl;
 
   createEffect(() => {
     dialogEl.showModal();
@@ -36,9 +37,7 @@ const ModalRoot: Component = () => {
     dialogEl.addEventListener("keydown", (ev) => ev.stopImmediatePropagation());
 
     // click outside dialog handler
-    dialogEl.addEventListener("click", (ev) => {
-      if (ev.target === dialogEl || ev.target.parentElement === dialogEl) popModal();
-    });
+    backdropEl.addEventListener("click", popModal);
   });
 
   return (
@@ -50,6 +49,7 @@ const ModalRoot: Component = () => {
           [classes.active]: !bgAnimPrePost(),
         }}
       >
+        <div ref={backdropEl} class={classes.backdrop} />
         <For each={currentModals()}>
           {(M, idx) => (
             <div