From 3c873419028055af229cdf5731f99d8b2e645216 Mon Sep 17 00:00:00 2001
From: Ben <45583362+ben-basten@users.noreply.github.com>
Date: Fri, 21 Mar 2025 09:39:41 -0400
Subject: [PATCH] fix(web): clicking away closes context menu (#16989)

* fix(web): clicking away closes context menu

* fix: use pointerdown event instead

* Revert "fix: use pointerdown event instead"

This reverts commit 0d2cf4719458a1d3804c43c3877297aaf41bc107.
---
 .../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 62cc6172230..a3e12e4f12e 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}
 >