Only close Dialog/Drawer on direct Backdrop click (not drag from Dial…

…og/Drawer to Backdrop)
techniq · Sep 9, 2023 · acc3255 · acc3255 · vercel · Sep 9, 2023
1 parent 161b728
commit acc3255
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 6 deletions.
diff --git a/.changeset/neat-frogs-crash.md b/.changeset/neat-frogs-crash.md
@@ -0,0 +1,5 @@
+---
+'svelte-ux': patch
+---
+
+Only close Dialog/Drawer on direct Backdrop click (not drag from Dialog/Drawer to Backdrop)
diff --git a/src/lib/components/Dialog.svelte b/src/lib/components/Dialog.svelte
@@ -66,14 +66,16 @@
 
 {#if open}
   <Backdrop
-    on:mouseup={(e) => {
-      // Do not allow event to reach Popover's on:mouseup (clickOutside)
-      e.stopPropagation();
+    on:click={() => {
       if (!persistent) {
         open = false;
       }
       dispatch('close-attempt');
     }}
+    on:mouseup={(e) => {
+      // Do not allow event to reach Popover's on:mouseup (clickOutside)
+      e.stopPropagation();
+    }}
     class={cls('z-50', theme.backdrop, classes.backdrop)}
     fadeParams={{ duration: 150 }}
     {portal}

diff --git a/src/lib/components/Drawer.svelte b/src/lib/components/Drawer.svelte
@@ -34,14 +34,16 @@
 
 {#if open}
   <Backdrop
-    on:mouseup={(e) => {
-      // Do not allow event to reach Popover's on:mouseup (clickOutside)
-      e.stopPropagation();
+    on:click={(e) => {
       if (!persistent) {
         open = false;
       }
       dispatch('close-attempt');
     }}
+    on:mouseup={(e) => {
+      // Do not allow event to reach Popover's on:mouseup (clickOutside)
+      e.stopPropagation();
+    }}
     class={cls('z-50', theme.backdrop, classes.backdrop)}
     {portal}
   />