fix(frontend): Forked svelte-select to fix overflow issues using a po… (

#1778)

* fix(frontend): Forked svelte-select to fix overflow issues using a portal

* fix(frontend): fix event bubble

* fix(frontend): fix build

* fix(frontend): Remove uncessary support for multiple values

* fix(frontend): conditional portal

* fix(frontend): conditional portal

* fix(frontend): fix resourcepicker

* fix(frontend): AppMultiSelect fix

* fix(frontend): fix build

* fix(frontend): AppMultiSelect fix

frontend/package.json

@@ -16,6 +16,7 @@
 		"test": "playwright test --config=tests-out/playwright.config.js"
 	},
 	"devDependencies": {
+		"@floating-ui/core": "^1.3.1",
 		"@playwright/test": "^1.34.3",
 		"@rgossiaux/svelte-headlessui": "^1.0.2",
 		"@sveltejs/adapter-static": "^2.0.2",
@@ -53,6 +54,7 @@
 		"svelte-awesome": "^3.2.0",
 		"svelte-awesome-color-picker": "^2.4.5",
 		"svelte-check": "^3.4.3",
+		"svelte-floating-ui": "^1.5.3",
 		"svelte-highlight": "^7.3.0",
 		"svelte-multiselect": "^8.6.2",
 		"svelte-overlay": "^1.4.1",
@@ -94,7 +96,6 @@
 		"svelte-chartjs": "^3.1.0",
 		"svelte-dnd-action": "^0.9.22",
 		"svelte-portal": "^2.2.0",
-		"svelte-select": "^5.6.1",
 		"svelte-timezone-picker": "^2.0.3",
 		"tailwind-merge": "^1.12.0",
 		"vscode-ws-jsonrpc": "3.0.0",

frontend/src/lib/components/ResourcePicker.svelte

@@ -4,7 +4,7 @@
 	import { faPen, faPlus, faRotateRight } from '@fortawesome/free-solid-svg-icons'
 	import { createEventDispatcher } from 'svelte'
 	import Icon from 'svelte-awesome'
-	import Select from 'svelte-select'
+	import Select from './apps/svelte-select/lib/index'
 	import { SELECT_INPUT_DEFAULT_STYLE } from '../defaults'
 	import AppConnect from './AppConnect.svelte'
 	import { Button } from './common'

frontend/src/lib/components/ScriptPicker.svelte

@@ -4,7 +4,7 @@
 	import { hubScripts, workspaceStore } from '$lib/stores'
 	import { createEventDispatcher } from 'svelte'
 
-	import Select from 'svelte-select'
+	import Select from './apps/svelte-select/lib/index'
 
 	import { getScriptByPath } from '$lib/scripts'
 	import { Button, Drawer, DrawerContent } from './common'
@@ -97,6 +97,7 @@
 			placeholder="Pick a {itemKind}"
 			inputStyles={SELECT_INPUT_DEFAULT_STYLE.inputStyles}
 			containerStyles={SELECT_INPUT_DEFAULT_STYLE.containerStyles}
+			portal={false}
 		/>
 	{/if}
 

frontend/src/lib/components/apps/components/inputs/AppMultiSelect.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
-	import { getContext } from 'svelte'
-	// import { SELECT_INPUT_DEFAULT_STYLE } from '../../../../defaults'
+	import { getContext, onMount } from 'svelte'
 	import { initConfig, initOutput } from '../../editor/appUtils'
 	import type { AppViewerContext, ComponentCustomCSS, RichConfigurations } from '../../types'
 	import { concatCustomCss } from '../../utils'
@@ -10,12 +9,18 @@
 	import ResolveConfig from '../helpers/ResolveConfig.svelte'
 	// @ts-ignore
 	import MultiSelect from 'svelte-multiselect'
+	import Portal from 'svelte-portal'
+	import { createFloatingActions } from 'svelte-floating-ui'
 
 	export let id: string
 	export let configuration: RichConfigurations
 	export let customCss: ComponentCustomCSS<'multiselectcomponent'> | undefined = undefined
 	export let render: boolean
 
+	const [floatingRef, floatingContent] = createFloatingActions({
+		strategy: 'absolute'
+	})
+
 	const { app, worldStore, selectedComponent, componentControl } =
 		getContext<AppViewerContext>('AppViewerContext')
 	let items: string[]
@@ -62,7 +67,23 @@
 	$: css = concatCustomCss($app.css?.multiselectcomponent, customCss)
 
 	$: outerDiv && css?.multiselect?.style && outerDiv.setAttribute('style', css?.multiselect?.style)
+
 	let outerDiv: HTMLDivElement | undefined = undefined
+	let portalRef: HTMLDivElement | undefined = undefined
+
+	onMount(() => {
+		// Find ul element with class 'options' within the outerDiv
+		const ul = outerDiv?.querySelector('.options')
+
+		if (ul) {
+			// Move the ul element to the portal
+			portalRef?.appendChild(ul)
+		}
+	})
+
+	let w = 0
+	let h = 0
+	let open = false
 </script>
 
 {#each Object.keys(components['multiselectcomponent'].initialData.configuration) as key (key)}
@@ -84,23 +105,46 @@
 				e.stopPropagation()
 			}
 		}}
+		use:floatingRef
+		bind:clientWidth={w}
+		bind:clientHeight={h}
 	>
 		{#if !value || Array.isArray(value)}
-			<MultiSelect
-				bind:outerDiv
-				outerDivClass={`${resolvedConfig.allowOverflow ? '' : 'h-full'}`}
-				ulSelectedClass={`${resolvedConfig.allowOverflow ? '' : 'overflow-auto max-h-full'} `}
-				bind:selected={value}
-				on:change={() => {
-					outputs?.result.set([...(value ?? [])])
-				}}
-				options={Array.isArray(items) ? items : []}
-				placeholder={resolvedConfig.placeholder}
-				allowUserOptions={resolvedConfig.create}
-				on:open={() => {
-					$selectedComponent = [id]
-				}}
-			/>
+			<div style={`height:${h}px;`}>
+				<MultiSelect
+					bind:outerDiv
+					outerDivClass={`${resolvedConfig.allowOverflow ? '' : 'h-full'}`}
+					ulSelectedClass={`${resolvedConfig.allowOverflow ? '' : 'overflow-auto max-h-full'} `}
+					ulOptionsClass={'p-2'}
+					bind:selected={value}
+					on:change={() => {
+						outputs?.result.set([...(value ?? [])])
+					}}
+					options={Array.isArray(items) ? items : []}
+					placeholder={resolvedConfig.placeholder}
+					allowUserOptions={resolvedConfig.create}
+					on:open={() => {
+						$selectedComponent = [id]
+						open = true
+					}}
+					on:close={() => {
+						open = false
+					}}
+				>
+					<div slot="option" let:option class="hover:bg-gray-200 p-1 cursor-pointer z-50">
+						{option}
+					</div>
+				</MultiSelect>
+				<Portal>
+					<div use:floatingContent class="z1000" hidden={!open}>
+						<div
+							bind:this={portalRef}
+							class="bg-white w-full border shadow-md rounded-md"
+							style={`min-width: ${w}px; `}
+						/>
+					</div>
+				</Portal>
+			</div>
 		{:else}
 			Value {value} is not an array
 		{/if}
@@ -112,7 +156,8 @@
 		padding: 0 !important;
 		overflow: auto;
 	}
-	.svelte-select-list {
+
+	.z1000 {
 		z-index: 1000 !important;
 	}
 </style>

frontend/src/lib/components/apps/components/inputs/AppSelect.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { getContext } from 'svelte'
-	import Select from 'svelte-select'
+	import Select from '../../svelte-select/lib/index'
 
 	import type {
 		AppViewerContext,

frontend/src/lib/components/apps/svelte-select/lib/ChevronIcon.svelte

@@ -0,0 +1,18 @@
+<svg width="100%" height="100%" viewBox="0 0 20 20" focusable="false" aria-hidden="true">
+	<path
+		fill="currentColor"
+		d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747
+          3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0
+          1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502
+          0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0
+          0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
+	/>
+</svg>
+
+<style>
+	svg {
+		width: var(--chevron-icon-width, 20px);
+		height: var(--chevron-icon-width, 20px);
+		color: var(--chevron-icon-colour, currentColor);
+	}
+</style>

frontend/src/lib/components/apps/svelte-select/lib/ClearIcon.svelte

@@ -0,0 +1,22 @@
+<svg
+	width="100%"
+	height="100%"
+	viewBox="-2 -2 50 50"
+	focusable="false"
+	aria-hidden="true"
+	role="presentation"
+>
+	<path
+		fill="currentColor"
+		d="M34.923,37.251L24,26.328L13.077,37.251L9.436,33.61l10.923-10.923L9.436,11.765l3.641-3.641L24,19.047L34.923,8.124
+    l3.641,3.641L27.641,22.688L38.564,33.61L34.923,37.251z"
+	/>
+</svg>
+
+<style>
+	svg {
+		width: var(--clear-icon-width, 20px);
+		height: var(--clear-icon-width, 20px);
+		color: var(--clear-icon-color, currentColor);
+	}
+</style>

frontend/src/lib/components/apps/svelte-select/lib/ConditionalPortal.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}