From cae8f5bbd45c117a4cb3e4b2255c193c0f6a4130 Mon Sep 17 00:00:00 2001
From: Guilhem <guilhemlemouel@gmail.com>
Date: Mon, 10 Feb 2025 14:57:30 +0000
Subject: [PATCH] use pointerdown_outside

---
 .../apps/components/display/AppMenu.svelte     |  2 +-
 .../lib/components/meltComponents/Menu.svelte  | 18 ++++++++++++------
 frontend/src/lib/utils.ts                      |  2 ++
 3 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/frontend/src/lib/components/apps/components/display/AppMenu.svelte b/frontend/src/lib/components/apps/components/display/AppMenu.svelte
index e048a54fcc..f42a292015 100644
--- a/frontend/src/lib/components/apps/components/display/AppMenu.svelte
+++ b/frontend/src/lib/components/apps/components/display/AppMenu.svelte
@@ -105,7 +105,7 @@
 				on:close
 				on:open
 				class={resolvedConfig.fillContainer ? 'w-full h-full' : ''}
-				useClickOutside={true}
+				usePointerDownOutside={true}
 			>
 				<svelte:fragment slot="trigger" let:trigger>
 					<div use:melt={trigger} class="w-full h-full">
diff --git a/frontend/src/lib/components/meltComponents/Menu.svelte b/frontend/src/lib/components/meltComponents/Menu.svelte
index 1c95403274..9cbfb8997d 100644
--- a/frontend/src/lib/components/meltComponents/Menu.svelte
+++ b/frontend/src/lib/components/meltComponents/Menu.svelte
@@ -2,7 +2,7 @@
 	import Portal from '$lib/components/Portal.svelte'
 	import { melt, createSync } from '@melt-ui/svelte'
 	import type { Placement } from '@floating-ui/core'
-	import { clickOutside } from '$lib/utils'
+	import { pointerDownOutside } from '$lib/utils'
 
 	import { twMerge } from 'tailwind-merge'
 	import ResolveOpen from '$lib/components/common/menu/ResolveOpen.svelte'
@@ -14,7 +14,7 @@
 	export let disabled = false
 	export let createMenu: (any) => any
 	export let invisible: boolean = false
-	export let useClickOutside: boolean = true
+	export let usePointerDownOutside: boolean = false
 
 	// Use the passed createMenu function
 	const menu = createMenu({
@@ -50,9 +50,15 @@
 	<button
 		class={twMerge('w-full h-full', justifyEnd ? 'flex justify-end' : '')}
 		{disabled}
-		use:clickOutside={{ capture: false, exclude: getMenuElements }}
-		on:click_outside={() => {
-			if (useClickOutside) {
+		use:pointerDownOutside={{
+			capture: true,
+			stopPropagation: open,
+			exclude: getMenuElements,
+			customEventName: 'pointerdown_menu'
+		}}
+		on:pointerdown_outside={() => {
+			console.log('dbg pointer down menu outside')
+			if (usePointerDownOutside) {
 				close()
 			}
 		}}
@@ -62,7 +68,7 @@
 	</button>
 
 	<Portal name="menu-v3">
-		<div class="z-[6000]" use:melt={$menuElement}>
+		<div class="z-[6000]" use:melt={$menuElement} data-menu>
 			<div
 				class={twMerge(
 					'border w-56 origin-top-right rounded-md shadow-md focus:outline-none overflow-y-auto',
diff --git a/frontend/src/lib/utils.ts b/frontend/src/lib/utils.ts
index e9be17cdd9..e76f6a7a6d 100644
--- a/frontend/src/lib/utils.ts
+++ b/frontend/src/lib/utils.ts
@@ -246,6 +246,8 @@ export function pointerDownOutside(
 	options?: ClickOutsideOptions
 ): { destroy(): void; update(newOptions: ClickOutsideOptions): void } {
 	const handlePointerDown = async (event: PointerEvent) => {
+		if (!event.isTrusted) return
+
 		if (options?.customEventName) {
 			node.dispatchEvent(
 				new CustomEvent<PointerEvent>(options.customEventName, {