From 11c6ff7481f351a0e9549d3ac8e2dbc8ce2ca4d8 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Wed, 21 Jun 2023 13:39:08 +0200
Subject: [PATCH] feat: add preselect first config for app selects

---
 .../apps/components/inputs/AppSelect.svelte          | 12 ++++++++++--
 .../components/apps/editor/component/components.ts   |  7 +++++++
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/frontend/src/lib/components/apps/components/inputs/AppSelect.svelte b/frontend/src/lib/components/apps/components/inputs/AppSelect.svelte
index 5756e6cc92..003b120207 100644
--- a/frontend/src/lib/components/apps/components/inputs/AppSelect.svelte
+++ b/frontend/src/lib/components/apps/components/inputs/AppSelect.svelte
@@ -77,7 +77,7 @@
 		let rawValue
 		if (resolvedConfig.defaultValue !== undefined) {
 			rawValue = resolvedConfig.defaultValue
-		} else if (listItems.length > 0) {
+		} else if (listItems.length > 0 && resolvedConfig?.preselectFirst) {
 			rawValue = resolvedConfig.items[0].value
 		}
 		if (rawValue !== undefined) {
@@ -117,6 +117,14 @@
 		}
 	}
 
+	function onClear() {
+		value = undefined
+		outputs?.result.set(undefined)
+		if (iterContext && listInputs) {
+			listInputs(id, undefined)
+		}
+	}
+
 	$: css = concatCustomCss($app.css?.selectcomponent, customCss)
 
 	function handleFilter(e) {
@@ -168,7 +176,7 @@
 			--border-color="#999"
 			bind:filterText
 			on:filter={handleFilter}
-			on:clear={onChange}
+			on:clear={onClear}
 			on:change={onChange}
 			items={listItems}
 			listAutoWidth={resolvedConfig.fullWidth}
diff --git a/frontend/src/lib/components/apps/editor/component/components.ts b/frontend/src/lib/components/apps/editor/component/components.ts
index 0e8c751d5d..37385a7575 100644
--- a/frontend/src/lib/components/apps/editor/component/components.ts
+++ b/frontend/src/lib/components/apps/editor/component/components.ts
@@ -1374,6 +1374,13 @@ Hello \${ctx.username}
 					value: undefined,
 					fieldType: 'object'
 				},
+				preselectFirst: {
+					type: 'static',
+					value: true,
+					fieldType: 'boolean',
+					onlyStatic: true,
+					tooltip: 'Preselect first item in the options if no default value is set'
+				},
 				fullWidth: {
 					type: 'static',
 					fieldType: 'boolean',