From 5666a965e068a12c5086a92ab1d8cdce9e557172 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 13 Mar 2024 13:01:44 +0000
Subject: [PATCH] Fix issue with click_outside and drawers

---
 packages/bbui/src/Actions/click_outside.js |  4 +-
 packages/bbui/src/Drawer/Drawer.svelte     | 67 ++++++++++++----------
 2 files changed, 39 insertions(+), 32 deletions(-)

diff --git a/packages/bbui/src/Actions/click_outside.js b/packages/bbui/src/Actions/click_outside.js
index 62416ae88d..12c4c4d002 100644
--- a/packages/bbui/src/Actions/click_outside.js
+++ b/packages/bbui/src/Actions/click_outside.js
@@ -33,8 +33,8 @@ const handleClick = event => {
     }
 
     // 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
+    const sourceInDrawer = handler.anchor.closest(".drawer-wrapper") != null
+    const clickInDrawer = event.target.closest(".drawer-wrapper") != null
     if (clickInDrawer && !sourceInDrawer) {
       return
     }
diff --git a/packages/bbui/src/Drawer/Drawer.svelte b/packages/bbui/src/Drawer/Drawer.svelte
index 04e678c4e5..89ee92726d 100644
--- a/packages/bbui/src/Drawer/Drawer.svelte
+++ b/packages/bbui/src/Drawer/Drawer.svelte
@@ -172,37 +172,44 @@
 
 {#if visible}
   <Portal target=".modal-container">
-    <div class="underlay" class:hidden={!$modal} transition:drawerFade|local />
-    <div
-      class="drawer"
-      class:stacked={depth > 0}
-      class:modal={$modal}
-      transition:drawerSlide|local
-      {style}
-    >
-      <header>
-        {#if $$slots.title}
-          <slot name="title" />
-        {:else}
-          <div class="text">{title || "Bindings"}</div>
-        {/if}
-        <div class="buttons">
-          <Button secondary quiet on:click={hide}>Cancel</Button>
-          <slot name="buttons" />
-          {#if $resizable}
-            <ActionButton
-              size="M"
-              quiet
-              selected={$modal}
-              on:click={() => modal.set(!$modal)}
-            >
-              <Icon name={$modal ? "Minimize" : "Maximize"} size="S" />
-            </ActionButton>
+    <!-- This class is unstyled, but needed by click_outside -->
+    <div class="drawer-wrapper">
+      <div
+        class="underlay"
+        class:hidden={!$modal}
+        transition:drawerFade|local
+      />
+      <div
+        class="drawer"
+        class:stacked={depth > 0}
+        class:modal={$modal}
+        transition:drawerSlide|local
+        {style}
+      >
+        <header>
+          {#if $$slots.title}
+            <slot name="title" />
+          {:else}
+            <div class="text">{title || "Bindings"}</div>
           {/if}
-        </div>
-      </header>
-      <slot name="body" />
-      <div class="overlay" class:hidden={$modal || depth === 0} />
+          <div class="buttons">
+            <Button secondary quiet on:click={hide}>Cancel</Button>
+            <slot name="buttons" />
+            {#if $resizable}
+              <ActionButton
+                size="M"
+                quiet
+                selected={$modal}
+                on:click={() => modal.set(!$modal)}
+              >
+                <Icon name={$modal ? "Minimize" : "Maximize"} size="S" />
+              </ActionButton>
+            {/if}
+          </div>
+        </header>
+        <slot name="body" />
+        <div class="overlay" class:hidden={$modal || depth === 0} />
+      </div>
     </div>
   </Portal>
 {/if}