From d604b6f2a0e5755c949f302c0490de47a8d662ca Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Wed, 21 Aug 2024 11:16:42 +0200
Subject: [PATCH] feat: add native html select support + fix mobile scroll on
 app text component

---
 .../apps/components/display/AppText.svelte    | 12 ++-
 .../apps/components/inputs/AppSelect.svelte   | 75 ++++++++++++-------
 .../apps/editor/component/components.ts       |  7 ++
 3 files changed, 62 insertions(+), 32 deletions(-)

diff --git a/frontend/src/lib/components/apps/components/display/AppText.svelte b/frontend/src/lib/components/apps/components/display/AppText.svelte
index cb053f9e96..78e10402b6 100644
--- a/frontend/src/lib/components/apps/components/display/AppText.svelte
+++ b/frontend/src/lib/components/apps/components/display/AppText.svelte
@@ -30,6 +30,12 @@
 		configuration
 	)
 
+	$: editorMode && onEditorMode()
+
+	function onEditorMode() {
+		autosize()
+		setTimeout(() => autosize(), 50)
+	}
 	const { app, worldStore, mode, componentControl } =
 		getContext<AppViewerContext>('AppViewerContext')
 
@@ -131,6 +137,7 @@
 				el.style.cssText = 'height:auto; padding:0'
 				el.style.cssText = 'height:' + el.scrollHeight + 'px'
 			}
+			// console.log(el, el?.scrollHeight)
 		}, 0)
 	}
 </script>
@@ -163,7 +170,6 @@
 			if (!editorMode) {
 				editorMode = true
 				document.getElementById(`text-${id}`)?.focus()
-				autosize()
 			}
 		}}
 		on:keydown|stopPropagation
@@ -172,7 +178,7 @@
 			<AlignWrapper {verticalAlignment}>
 				<textarea
 					class={twMerge(
-						'whitespace-pre-wrap !outline-none !border-0 !bg-transparent !resize-none !overflow-hidden !ring-0 !p-0',
+						'whitespace-pre-wrap !outline-none !border-0 !bg-transparent !resize-none !ring-0 !p-0',
 						css?.text?.class,
 						'wm-text',
 						classes,
@@ -214,7 +220,7 @@
 						class="flex flex-wrap gap-2 pb-0.5 w-full {$mode === 'dnd' &&
 						(componentInput?.type == 'template' || componentInput?.type == 'templatev2')
 							? 'cursor-text'
-							: ''}"
+							: 'overflow-auto'}"
 					>
 						<svelte:element
 							this={component}
diff --git a/frontend/src/lib/components/apps/components/inputs/AppSelect.svelte b/frontend/src/lib/components/apps/components/inputs/AppSelect.svelte
index 136e06517b..4cf98d0131 100644
--- a/frontend/src/lib/components/apps/components/inputs/AppSelect.svelte
+++ b/frontend/src/lib/components/apps/components/inputs/AppSelect.svelte
@@ -136,6 +136,12 @@
 		}
 	}
 
+	function onNativeChange(e: Event) {
+		const target = e.target as HTMLSelectElement
+		const value = target.value
+		setValue(value)
+	}
+
 	function setValue(nvalue: any) {
 		let result: any = undefined
 		try {
@@ -231,35 +237,46 @@
 		}}
 	>
 		{#if Array.isArray(listItems) && listItems.every((x) => x && typeof x == 'object' && typeof x['label'] == 'string' && `value` in x)}
-			<Select
-				inAppEditor={true}
-				--border-radius="0.250rem"
-				--clear-icon-color="#6b7280"
-				--border={$darkMode ? '1px solid #6b7280' : '1px solid #d1d5db'}
-				bind:filterText
-				on:filter={handleFilter}
-				on:clear={onClear}
-				on:change={onChange}
-				items={listItems}
-				listAutoWidth={resolvedConfig.fullWidth}
-				inputStyles={SELECT_INPUT_DEFAULT_STYLE.inputStyles}
-				containerStyles={($darkMode
-					? SELECT_INPUT_DEFAULT_STYLE.containerStylesDark
-					: SELECT_INPUT_DEFAULT_STYLE.containerStyles) + css?.input?.style}
-				{value}
-				class={css?.input?.class}
-				placeholder={resolvedConfig.placeholder}
-				disabled={resolvedConfig.disabled}
-				on:focus={() => {
-					if (!$connectingInput.opened) {
-						$selectedComponent = [id]
-					}
-				}}
-			>
-				<svelte:fragment slot="item" let:item
-					>{#if resolvedConfig.create}{item.created ? 'Add new: ' : ''}{/if}{item.label}
-				</svelte:fragment>
-			</Select>
+			{#if resolvedConfig.nativeHtmlSelect}
+				<select class={css?.input?.class} style={css?.input?.style} on:change={onNativeChange}>
+					{#if resolvedConfig.placeholder}
+						<option value="" disabled selected>{resolvedConfig.placeholder}</option>
+					{/if}
+					{#each listItems as item (item.value)}
+						<option value={item.value} selected={item.value === value}>{item.label}</option>
+					{/each}
+				</select>
+			{:else}
+				<Select
+					inAppEditor={true}
+					--border-radius="0.250rem"
+					--clear-icon-color="#6b7280"
+					--border={$darkMode ? '1px solid #6b7280' : '1px solid #d1d5db'}
+					bind:filterText
+					on:filter={handleFilter}
+					on:clear={onClear}
+					on:change={onChange}
+					items={listItems}
+					listAutoWidth={resolvedConfig.fullWidth}
+					inputStyles={SELECT_INPUT_DEFAULT_STYLE.inputStyles}
+					containerStyles={($darkMode
+						? SELECT_INPUT_DEFAULT_STYLE.containerStylesDark
+						: SELECT_INPUT_DEFAULT_STYLE.containerStyles) + css?.input?.style}
+					{value}
+					class={css?.input?.class}
+					placeholder={resolvedConfig.placeholder}
+					disabled={resolvedConfig.disabled}
+					on:focus={() => {
+						if (!$connectingInput.opened) {
+							$selectedComponent = [id]
+						}
+					}}
+				>
+					<svelte:fragment slot="item" let:item
+						>{#if resolvedConfig.create}{item.created ? 'Add new: ' : ''}{/if}{item.label}
+					</svelte:fragment>
+				</Select>
+			{/if}
 		{:else}
 			<Popover notClickable placement="bottom" popupClass="!bg-surface border w-96">
 				<div
diff --git a/frontend/src/lib/components/apps/editor/component/components.ts b/frontend/src/lib/components/apps/editor/component/components.ts
index 15e21dcc83..ff3bc54a4b 100644
--- a/frontend/src/lib/components/apps/editor/component/components.ts
+++ b/frontend/src/lib/components/apps/editor/component/components.ts
@@ -2106,6 +2106,13 @@ This is a paragraph.
 
 					tooltip: 'Preselect first item in the options if no default value is set'
 				},
+				nativeHtmlSelect: {
+					type: 'static',
+					fieldType: 'boolean',
+					value: false,
+
+					tooltip: 'Use a native html select instead of the Windmill select component'
+				},
 				fullWidth: {
 					type: 'static',
 					fieldType: 'boolean',