From aa091804b8adea1bf98b26807e17df6e6f10d80a Mon Sep 17 00:00:00 2001
From: ben-basten <45583362+ben-basten@users.noreply.github.com>
Date: Wed, 19 Mar 2025 07:20:49 -0400
Subject: [PATCH] fix(web): clicking away closes context menu

---
 .../context-menu/button-context-menu.svelte      | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/web/src/lib/components/shared-components/context-menu/button-context-menu.svelte b/web/src/lib/components/shared-components/context-menu/button-context-menu.svelte
index 62cc617223..a3e12e4f12 100644
--- a/web/src/lib/components/shared-components/context-menu/button-context-menu.svelte
+++ b/web/src/lib/components/shared-components/context-menu/button-context-menu.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { clickOutside } from '$lib/actions/click-outside';
   import { contextMenuNavigation } from '$lib/actions/context-menu-navigation';
   import { shortcuts } from '$lib/actions/shortcut';
   import CircleIconButton, {
@@ -105,6 +104,19 @@
     closeDropdown();
   };
 
+  const handleDocumentClick = (event: MouseEvent) => {
+    if (!isOpen) {
+      return;
+    }
+
+    const target = event.target as Node | null;
+    if (buttonContainer?.contains(target)) {
+      return;
+    }
+
+    closeDropdown();
+  };
+
   const focusButton = () => {
     const button = buttonContainer?.querySelector(`#${buttonId}`) as HTMLButtonElement | null;
     button?.focus();
@@ -118,6 +130,7 @@
 </script>
 
 <svelte:window onresize={onResize} />
+<svelte:document onclick={handleDocumentClick} />
 
 <div
   use:contextMenuNavigation={{
@@ -129,7 +142,6 @@
     selectedId: $selectedIdStore,
     selectionChanged: (id) => ($selectedIdStore = id),
   }}
-  use:clickOutside={{ onOutclick: closeDropdown }}
   onresize={onResize}
   {...restProps}
 >