From 70b44528bb98079b93ab59f47a5008f78b69ad29 Mon Sep 17 00:00:00 2001
From: Guilhem <guilhemlemouel@gmail.com>
Date: Sun, 9 Feb 2025 23:35:16 +0000
Subject: [PATCH] add use clickOutside option to Menu

---
 .../apps/components/display/AppMenu.svelte     |  1 +
 .../lib/components/meltComponents/Menu.svelte  | 18 +++++++++++++++++-
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/frontend/src/lib/components/apps/components/display/AppMenu.svelte b/frontend/src/lib/components/apps/components/display/AppMenu.svelte
index de56cd22cd..e048a54fcc 100644
--- a/frontend/src/lib/components/apps/components/display/AppMenu.svelte
+++ b/frontend/src/lib/components/apps/components/display/AppMenu.svelte
@@ -105,6 +105,7 @@
 				on:close
 				on:open
 				class={resolvedConfig.fillContainer ? 'w-full h-full' : ''}
+				useClickOutside={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 8fe486c201..1c95403274 100644
--- a/frontend/src/lib/components/meltComponents/Menu.svelte
+++ b/frontend/src/lib/components/meltComponents/Menu.svelte
@@ -2,6 +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 { twMerge } from 'tailwind-merge'
 	import ResolveOpen from '$lib/components/common/menu/ResolveOpen.svelte'
@@ -13,6 +14,7 @@
 	export let disabled = false
 	export let createMenu: (any) => any
 	export let invisible: boolean = false
+	export let useClickOutside: boolean = true
 
 	// Use the passed createMenu function
 	const menu = createMenu({
@@ -36,12 +38,26 @@
 	export function close() {
 		open = false
 	}
+
+	async function getMenuElements(): Promise<HTMLElement[]> {
+		return Array.from(document.querySelectorAll('[data-menu]')) as HTMLElement[]
+	}
 </script>
 
 <div class={twMerge('w-full h-8', $$props.class)}>
 	<ResolveOpen {open} on:open on:close />
 
-	<button class={twMerge('w-full h-full', justifyEnd ? 'flex justify-end' : '')} {disabled}>
+	<button
+		class={twMerge('w-full h-full', justifyEnd ? 'flex justify-end' : '')}
+		{disabled}
+		use:clickOutside={{ capture: false, exclude: getMenuElements }}
+		on:click_outside={() => {
+			if (useClickOutside) {
+				close()
+			}
+		}}
+		data-menu
+	>
 		<slot name="trigger" trigger={$trigger} />
 	</button>