From 0d2cf4719458a1d3804c43c3877297aaf41bc107 Mon Sep 17 00:00:00 2001
From: ben-basten <45583362+ben-basten@users.noreply.github.com>
Date: Wed, 19 Mar 2025 17:10:20 -0400
Subject: [PATCH] fix: use pointerdown event instead

---
 web/src/lib/actions/click-outside.ts             |  4 ++--
 .../context-menu/button-context-menu.svelte      | 16 ++--------------
 2 files changed, 4 insertions(+), 16 deletions(-)

diff --git a/web/src/lib/actions/click-outside.ts b/web/src/lib/actions/click-outside.ts
index 92775546aa..ef8b8b6742 100644
--- a/web/src/lib/actions/click-outside.ts
+++ b/web/src/lib/actions/click-outside.ts
@@ -35,12 +35,12 @@ export function clickOutside(node: HTMLElement, options: Options = {}): ActionRe
     }
   };
 
-  document.addEventListener('mousedown', handleClick, true);
+  document.addEventListener('pointerdown', handleClick, true);
   node.addEventListener('keydown', handleKey, false);
 
   return {
     destroy() {
-      document.removeEventListener('mousedown', handleClick, true);
+      document.removeEventListener('pointerdown', handleClick, true);
       node.removeEventListener('keydown', handleKey, false);
     },
   };
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 a3e12e4f12..62cc617223 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,4 +1,5 @@
 <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, {
@@ -104,19 +105,6 @@
     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();
@@ -130,7 +118,6 @@
 </script>
 
 <svelte:window onresize={onResize} />
-<svelte:document onclick={handleDocumentClick} />
 
 <div
   use:contextMenuNavigation={{
@@ -142,6 +129,7 @@
     selectedId: $selectedIdStore,
     selectionChanged: (id) => ($selectedIdStore = id),
   }}
+  use:clickOutside={{ onOutclick: closeDropdown }}
   onresize={onResize}
   {...restProps}
 >