Exclude drawers from click_outside callbacks, unless registered inside a drawer

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)
   })
 }

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,20 +144,16 @@
     return 1 - lim * 0.1
   }
 
-  onMount(() => {
-    if (forceModal) {
-      modal.set(true)
-    }
-    return () => {
+  onDestroy(() => {
     if (visible) {
       hide()
     }
-    }
   })
 </script>
 
 {#if visible}
   <Portal target=".modal-container">
+    <div class="drawer-container">
       {#if $modal}
         <div transition:fade={{ duration: 260 }} class="underlay" />
       {/if}
@@ -182,6 +176,7 @@
           <div class="overlay" transition:fade|local={{ duration: 260 }} />
         {/if}
       </div>
+    </div>
   </Portal>
 {/if}