From d44c3b535c8fba4c0eb7200af9addb0ab4e15a30 Mon Sep 17 00:00:00 2001
From: Diego Imbert <70353967+diegoimbert@users.noreply.github.com>
Date: Thu, 18 Sep 2025 20:56:59 +0200
Subject: [PATCH] fix: fix flow quick picker stuck (#6638)

* Fix flow quick picker stuck

* fix Ci
---
 .../components/common/popup/PopupV2.svelte    | 36 +++++--------------
 .../flows/map/InsertModuleButton.svelte       | 17 ++-------
 .../renderers/nodes/NewAIToolNode.svelte      | 15 +++-----
 frontend/src/lib/utils.ts                     |  6 ++--
 4 files changed, 20 insertions(+), 54 deletions(-)

diff --git a/frontend/src/lib/components/common/popup/PopupV2.svelte b/frontend/src/lib/components/common/popup/PopupV2.svelte
index bbd68fe47b..425a09908a 100644
--- a/frontend/src/lib/components/common/popup/PopupV2.svelte
+++ b/frontend/src/lib/components/common/popup/PopupV2.svelte
@@ -8,8 +8,8 @@
 		floatingConfig?: ComputeConfig
 		open?: boolean
 		target?: string | undefined
-		button?: import('svelte').Snippet<[any]>
-		children?: import('svelte').Snippet<[any]>
+		button?: import('svelte').Snippet
+		children?: import('svelte').Snippet<[{ close: () => void }]>
 	}
 
 	let {
@@ -28,29 +28,13 @@
 	// export let floatingClasses: string = ''
 	const [floatingRef, floatingContent] = createFloatingActions(floatingConfig)
 
-	function close(div: Element | null) {
+	function close() {
 		open = false
 	}
-
-	let acceptClickoutside = $state(false)
-	function pointerup() {
-		setTimeout(() => {
-			acceptClickoutside = true
-		}, 100)
-	}
-
-	function pointerdown() {
-		if (acceptClickoutside && open) {
-			open = false
-		} else {
-			acceptClickoutside = false
-			open = true
-		}
-	}
 </script>
 
 <div use:floatingRef>
-	{@render button?.({ pointerup, pointerdown })}
+	{@render button?.()}
 </div>
 
 <Portal name="popup-v2" {target}>
@@ -61,17 +45,13 @@
 			use:floatingContent
 			transition:fly={{ duration: 100, y: -16 }}
 		>
-			<!-- svelte-ignore event_directive_deprecated -->
 			<div
-				use:clickOutside
-				on:click_outside={() => {
-					if (acceptClickoutside) {
-						acceptClickoutside = false
-						open = false
-					}
+				use:clickOutside={{
+					eventToListenName: 'pointerdown',
+					onClickOutside: () => (open = false)
 				}}
 			>
-				{@render children?.({ close })}
+				{@render children?.({ close: () => close(null) })}
 			</div>
 		</div>
 	{/if}
diff --git a/frontend/src/lib/components/flows/map/InsertModuleButton.svelte b/frontend/src/lib/components/flows/map/InsertModuleButton.svelte
index 71a5fbff6e..d7bb09815a 100644
--- a/frontend/src/lib/components/flows/map/InsertModuleButton.svelte
+++ b/frontend/src/lib/components/flows/map/InsertModuleButton.svelte
@@ -1,7 +1,4 @@
 <script lang="ts">
-	import { preventDefault, stopPropagation } from 'svelte/legacy'
-
-	import { createEventDispatcher } from 'svelte'
 	import { Bug, Cross } from 'lucide-svelte'
 	import InsertModuleInner from './InsertModuleInner.svelte'
 	import { twMerge } from 'tailwind-merge'
@@ -13,8 +10,6 @@
 
 	// import type { Writable } from 'svelte/store'
 
-	const dispatch = createEventDispatcher()
-
 	type Alignment = 'start' | 'end' | 'center'
 	type Side = 'top' | 'bottom'
 	type Placement = `${Side}-${Alignment}`
@@ -60,7 +55,7 @@ noTransition
 shouldUsePortal={true} -->
 
 <PopupV2 {floatingConfig} bind:open target="#flow-editor">
-	{#snippet button({ pointerdown, pointerup })}
+	{#snippet button()}
 		<button
 			title={`Add ${
 				kind === 'failure'
@@ -77,13 +72,7 @@ shouldUsePortal={true} -->
 				'w-[17.5px] h-[17.5px] flex items-center justify-center !outline-[1px] outline dark:outline-gray-500 outline-gray-300 text-secondary bg-surface focus:outline-none hover:bg-surface-hover rounded',
 				clazz
 			)}
-			onpointerdown={stopPropagation(
-				preventDefault(() => {
-					dispatch('open')
-					pointerdown()
-				})
-			)}
-			onpointerup={pointerup}
+			onpointerdown={() => (open = !open)}
 		>
 			{#if kind === 'trigger'}
 				<SchedulePollIcon size={14} />
@@ -99,7 +88,7 @@ shouldUsePortal={true} -->
 	{/snippet}
 	{#snippet children({ close })}
 		<InsertModuleInner
-			on:close={() => close(null)}
+			on:close={() => close()}
 			on:insert
 			on:new
 			on:pickFlow
diff --git a/frontend/src/lib/components/graph/renderers/nodes/NewAIToolNode.svelte b/frontend/src/lib/components/graph/renderers/nodes/NewAIToolNode.svelte
index cb30827dcb..8b88d51d40 100644
--- a/frontend/src/lib/components/graph/renderers/nodes/NewAIToolNode.svelte
+++ b/frontend/src/lib/components/graph/renderers/nodes/NewAIToolNode.svelte
@@ -1,6 +1,4 @@
 <script lang="ts">
-	import { preventDefault, stopPropagation } from 'svelte/legacy'
-
 	import { twMerge } from 'tailwind-merge'
 	import { type NewAiToolN } from '../../graphBuilder.svelte'
 	import InsertModuleInner from '$lib/components/flows/map/InsertModuleInner.svelte'
@@ -22,11 +20,13 @@
 		middleware: [offset(8), flip()],
 		autoUpdate: true
 	}
+
+	let open = $state(false)
 </script>
 
 <!-- svelte-ignore a11y_no_static_element_interactions -->
-<PopupV2 {floatingConfig} target="#flow-editor">
-	{#snippet button({ pointerdown, pointerup })}
+<PopupV2 bind:open {floatingConfig} target="#flow-editor">
+	{#snippet button()}
 		<button
 			title={`Add 'tool'
 			}`}
@@ -34,12 +34,7 @@
 			class={twMerge(
 				'!w-full h-6 flex items-center justify-center !outline-[1px] outline dark:outline-gray-500 outline-gray-300 text-secondary bg-surface focus:outline-none hover:bg-surface-hover rounded'
 			)}
-			onpointerdown={stopPropagation(
-				preventDefault(() => {
-					pointerdown()
-				})
-			)}
-			onpointerup={pointerup}
+			onpointerdown={() => (open = !open)}
 		>
 			<div class="flex flex-row items-center gap-1 font-medium text-2xs">
 				<Cross size={12} />
diff --git a/frontend/src/lib/utils.ts b/frontend/src/lib/utils.ts
index fc60db5042..95a59ebe6c 100644
--- a/frontend/src/lib/utils.ts
+++ b/frontend/src/lib/utils.ts
@@ -309,6 +309,7 @@ interface ClickOutsideOptions {
 	exclude?: (() => Promise<HTMLElement[]>) | HTMLElement[] | undefined
 	stopPropagation?: boolean
 	customEventName?: string
+	eventToListenName?: 'click' | 'pointerdown'
 	// on:click_outside cannot be used with svelte 5
 	onClickOutside?: (event: MouseEvent) => void
 }
@@ -355,14 +356,15 @@ export function clickOutside(
 	}
 
 	const capture = typeof options === 'boolean' ? options : (options?.capture ?? true)
-	document.addEventListener('click', handleClick, capture ?? true)
+	const eventToListenName = (typeof options === 'object' && options.eventToListenName) || 'click'
+	document.addEventListener(eventToListenName, handleClick, capture ?? true)
 
 	return {
 		update(newOptions: ClickOutsideOptions | boolean) {
 			options = newOptions
 		},
 		destroy() {
-			document.removeEventListener('click', handleClick, capture ?? true)
+			document.removeEventListener(eventToListenName, handleClick, capture ?? true)
 		}
 	}
 }