From fc5a9b3f589dcc7fbe4aa60e2013767dbf486c52 Mon Sep 17 00:00:00 2001
From: Faton Ramadani <faton.ramadani14@gmail.com>
Date: Tue, 6 Feb 2024 16:35:20 +0100
Subject: [PATCH] Fix select click outside (#3162)

* feat(frontend): fix clickOutside when using portals

* feat(frontend): fix clickOutside when using portals

* feat(frontend): clean up
---
 .../apps/svelte-select/lib/Select.svelte           |  2 +-
 frontend/src/lib/utils.ts                          | 14 ++++++++++++--
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/frontend/src/lib/components/apps/svelte-select/lib/Select.svelte b/frontend/src/lib/components/apps/svelte-select/lib/Select.svelte
index e0c0a1c979..b82498e269 100644
--- a/frontend/src/lib/components/apps/svelte-select/lib/Select.svelte
+++ b/frontend/src/lib/components/apps/svelte-select/lib/Select.svelte
@@ -681,7 +681,7 @@
 		{/if}
 
 		{#if showClear}
-			<button type="button" class="icon clear-select" on:click={handleClear}>
+			<button type="button" class="icon clear-select" on:click|stopPropagation={handleClear}>
 				<slot name="clear-icon">
 					<ClearIcon />
 				</slot>
diff --git a/frontend/src/lib/utils.ts b/frontend/src/lib/utils.ts
index 3534d68f9a..fe83e0f3dc 100644
--- a/frontend/src/lib/utils.ts
+++ b/frontend/src/lib/utils.ts
@@ -116,10 +116,20 @@ export function validatePassword(password: string): boolean {
 	return re.test(password)
 }
 
+const portalDivs = ['app-editor-select']
+
 export function clickOutside(node: Node, capture?: boolean): { destroy(): void } {
 	const handleClick = (event: MouseEvent) => {
-		if (node && !node.contains(<HTMLElement>event.target) && !event.defaultPrevented) {
-			node.dispatchEvent(new CustomEvent<MouseEvent>('click_outside', { detail: event }))
+		const target = event.target as HTMLElement
+
+		if (node && !node.contains(target) && !event.defaultPrevented) {
+			const portalDivsSelector = portalDivs.map((id) => `#${id}`).join(', ')
+
+			const parent = target.closest(portalDivsSelector)
+
+			if (!parent) {
+				node.dispatchEvent(new CustomEvent<MouseEvent>('click_outside', { detail: event }))
+			}
 		}
 	}