From c836466b6262295e9f586302c1729339e7e6316e Mon Sep 17 00:00:00 2001
From: ioj4 <69911332+ioj4@users.noreply.github.com>
Date: Thu, 8 Aug 2024 16:32:05 +0200
Subject: [PATCH] [ui] fix modals closing unintentionally

---
 packages/shelter-ui/src/modals.tsx.scss | 6 ++++++
 packages/shelter-ui/src/openModal.tsx   | 6 +++---
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/packages/shelter-ui/src/modals.tsx.scss b/packages/shelter-ui/src/modals.tsx.scss
index c9090b1..e32fa15 100644
--- 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
index 1c4169e..7ba4537 100644
--- 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