From e2fe2798421cb836732452c845a353cf32b13a93 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 27 Feb 2024 14:30:21 +0000
Subject: [PATCH] Exclude drawers from click_outside callbacks, unless
 registered inside a drawer

---
 packages/bbui/src/Actions/click_outside.js |  7 +++
 packages/bbui/src/Drawer/Drawer.svelte     | 59 ++++++++++------------
 2 files changed, 34 insertions(+), 32 deletions(-)

diff --git a/packages/bbui/src/Actions/click_outside.js b/packages/bbui/src/Actions/click_outside.js
index 1961dca47c..62416ae88d 100644
--- a/packages/bbui/src/Actions/click_outside.js
+++ b/packages/bbui/src/Actions/click_outside.js
@@ -32,6 +32,13 @@ const handleClick = event => {
       return
     }
 
+    // Ignore clicks for drawers, unless the handler is registered from a drawer
+    const sourceInDrawer = handler.anchor.closest(".drawer-container") != null
+    const clickInDrawer = event.target.closest(".drawer-container") != null
+    if (clickInDrawer && !sourceInDrawer) {
+      return
+    }
+
     handler.callback?.(event)
   })
 }
diff --git a/packages/bbui/src/Drawer/Drawer.svelte b/packages/bbui/src/Drawer/Drawer.svelte
index 5c80e4c84c..672795e078 100644
--- a/packages/bbui/src/Drawer/Drawer.svelte
+++ b/packages/bbui/src/Drawer/Drawer.svelte
@@ -46,13 +46,14 @@
     }
     observer?.disconnect()
     observer = null
+    modal.set(false)
   }
 </script>
 
 <script>
   import Portal from "svelte-portal"
   import Button from "../Button/Button.svelte"
-  import { setContext, createEventDispatcher, onMount } from "svelte"
+  import { setContext, createEventDispatcher, onDestroy } from "svelte"
   import { generate } from "shortid"
   import { fade } from "svelte/transition"
 
@@ -106,9 +107,6 @@
     visible = false
     dispatch("drawerHide", drawerId)
     openDrawers.update(state => state.filter(id => id !== drawerId))
-    if (!$openDrawers.length) {
-      modal.set(false)
-    }
     unobserve()
   }
 
@@ -146,41 +144,38 @@
     return 1 - lim * 0.1
   }
 
-  onMount(() => {
-    if (forceModal) {
-      modal.set(true)
-    }
-    return () => {
-      if (visible) {
-        hide()
-      }
+  onDestroy(() => {
+    if (visible) {
+      hide()
     }
   })
 </script>
 
 {#if visible}
   <Portal target=".modal-container">
-    {#if $modal}
-      <div transition:fade={{ duration: 260 }} class="underlay" />
-    {/if}
-    <div
-      class="drawer"
-      class:stacked={depth > 0}
-      class:modal={$modal}
-      transition:slide|local
-      {style}
-    >
-      <header>
-        <div class="text">{title || "Bindings"}</div>
-        <div class="buttons">
-          <Button secondary quiet on:click={hide}>Cancel</Button>
-          <slot name="buttons" />
-        </div>
-      </header>
-      <slot name="body" />
-      {#if !$modal && depth > 0}
-        <div class="overlay" transition:fade|local={{ duration: 260 }} />
+    <div class="drawer-container">
+      {#if $modal}
+        <div transition:fade={{ duration: 260 }} class="underlay" />
       {/if}
+      <div
+        class="drawer"
+        class:stacked={depth > 0}
+        class:modal={$modal}
+        transition:slide|local
+        {style}
+      >
+        <header>
+          <div class="text">{title || "Bindings"}</div>
+          <div class="buttons">
+            <Button secondary quiet on:click={hide}>Cancel</Button>
+            <slot name="buttons" />
+          </div>
+        </header>
+        <slot name="body" />
+        {#if !$modal && depth > 0}
+          <div class="overlay" transition:fade|local={{ duration: 260 }} />
+        {/if}
+      </div>
     </div>
   </Portal>
 {/if}