From 8345b389a65a86cec296e6544df264b167dfaeab Mon Sep 17 00:00:00 2001
From: Faton Ramadani <faton.ramadani14@gmail.com>
Date: Wed, 12 Jul 2023 18:31:09 +0200
Subject: [PATCH] fix(frontend): fix conditional portal (#1868)

---
 .../apps/components/inputs/AppSelect.svelte           |  1 +
 .../svelte-select/lib/ConditionalPortalGlobal.svelte  | 11 +++++++++++
 .../components/apps/svelte-select/lib/Select.svelte   | 10 ++++++++--
 3 files changed, 20 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/lib/components/apps/svelte-select/lib/ConditionalPortalGlobal.svelte

diff --git a/frontend/src/lib/components/apps/components/inputs/AppSelect.svelte b/frontend/src/lib/components/apps/components/inputs/AppSelect.svelte
index 36a94cfce4..fb9003d7ef 100644
--- a/frontend/src/lib/components/apps/components/inputs/AppSelect.svelte
+++ b/frontend/src/lib/components/apps/components/inputs/AppSelect.svelte
@@ -178,6 +178,7 @@
 			on:filter={handleFilter}
 			on:clear={onClear}
 			on:change={onChange}
+			inAppEditor={true}
 			items={listItems}
 			listAutoWidth={resolvedConfig.fullWidth}
 			inputStyles={SELECT_INPUT_DEFAULT_STYLE.inputStyles}
diff --git a/frontend/src/lib/components/apps/svelte-select/lib/ConditionalPortalGlobal.svelte b/frontend/src/lib/components/apps/svelte-select/lib/ConditionalPortalGlobal.svelte
new file mode 100644
index 0000000000..d92f75a7b6
--- /dev/null
+++ b/frontend/src/lib/components/apps/svelte-select/lib/ConditionalPortalGlobal.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+	import Portal from 'svelte-portal'
+
+	export let condition = false
+</script>
+
+{#if condition}
+	<Portal><slot /></Portal>
+{:else}
+	<slot />
+{/if}
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 48a8fff2e6..31543c383e 100644
--- a/frontend/src/lib/components/apps/svelte-select/lib/Select.svelte
+++ b/frontend/src/lib/components/apps/svelte-select/lib/Select.svelte
@@ -13,12 +13,18 @@
 	import ClearIcon from './ClearIcon.svelte'
 	import LoadingIcon from './LoadingIcon.svelte'
 	import ConditionalPortal from './ConditionalPortal.svelte'
+	import ConditionalPortalGlobal from './ConditionalPortalGlobal.svelte'
+
 	import { extractCustomProperties } from '$lib/utils'
 
 	export let portal = true
 
 	export let justValue = null // read-only
 
+	export let inAppEditor = false
+
+	let PortalWrapper = inAppEditor ? ConditionalPortal : ConditionalPortalGlobal
+
 	export let filter = _filter
 	export let getItems = _getItems
 
@@ -607,7 +613,7 @@
 	use:floatingRef
 >
 	{#if listOpen}
-		<ConditionalPortal condition={portal}>
+		<PortalWrapper condition={portal}>
 			<div
 				style={extractCustomProperties(containerStyles)}
 				use:floatingContent
@@ -654,7 +660,7 @@
 				{/if}
 				{#if $$slots['list-append']}<slot name="list-append" />{/if}
 			</div>
-		</ConditionalPortal>
+		</PortalWrapper>
 	{/if}
 
 	<span aria-live="polite" aria-atomic="false" aria-relevant="additions text" class="a11y-text">