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 }))
+			}
 		}
 	}