fix input transform form

frontend/src/lib/components/ArgInput.svelte

@@ -28,7 +28,6 @@
 	export let required = false
 	export let pattern: undefined | string = undefined
 	export let valid = required ? false : true
-	export let minRows = 1
 	export let maxRows = 10
 	export let enum_: string[] | undefined = undefined
 	export let disabled = false
@@ -71,18 +70,6 @@
 		}
 	}
 
-	$: {
-		defaultValue && recomputeRowSize(JSON.stringify(defaultValue, null, 4))
-	}
-
-	function recomputeRowSize(str: string) {
-		if (type == 'string') {
-			minRows = str.split('\n').length
-		} else if (type != 'string') {
-			minRows = Math.max(minRows, Math.min(str.split(/\r\n|\r|\n/).length + 1, maxRows))
-		}
-	}
-
 	export function evalValueToRaw() {
 		if (value) {
 			rawValue = JSON.stringify(value, null, 4)
@@ -102,6 +89,17 @@
 		}
 	}
 
+	export function focus() {
+		el?.focus()
+	}
+
+	export async function recomputeSize() {
+		if (el) {
+			el.style.height = '30px'
+			el.style.height = el.scrollHeight + 'px'
+		}
+	}
+
 	function validateInput(pattern: string | undefined, v: any): void {
 		if (required && (v == undefined || v == null || v === '')) {
 			error = 'This field is required'
@@ -282,11 +280,9 @@
 						on:focus
 						{disabled}
 						style="max-height: {maxHeight}"
-						on:input={(e) => {
-							if (el) {
-								el.style.height = '5px'
-								el.style.height = el.scrollHeight + 'px'
-							}
+						on:input={() => {
+							recomputeSize()
+							dispatch('input', { rawValue: value, isRaw: false })
 						}}
 						class="col-span-10 {valid
 							? ''
@@ -343,11 +339,8 @@
 						: 'border border-red-700 border-opacity-30 focus:border-red-700 focus:border-opacity-30 bg-red-100'}"
 					placeholder={defaultValue ?? ''}
 					bind:value
-					on:input={async () => {
-						if (el) {
-							el.style.height = '30px'
-							el.style.height = el.scrollHeight + 'px'
-						}
+					on:input={() => {
+						recomputeSize()
 						dispatch('input', { rawValue: value, isRaw: false })
 					}}
 				/>

frontend/src/lib/components/InputTransformForm.svelte

@@ -23,6 +23,7 @@
 	export let importPath: string | undefined = undefined
 
 	export let monaco: SimpleEditor | undefined = undefined
+	let argInput: ArgInput | undefined = undefined
 
 	let inputCat: InputCat = 'object'
 	let propertyType = getPropertyType(arg)
@@ -73,6 +74,27 @@
 
 	$: checked = propertyType == 'javascript'
 
+	function onFocus() {
+		{
+			if (isStaticTemplate(inputCat)) {
+				focusProp(argName, 'append', (path) => {
+					const toAppend = `\$\{${path}}`
+					arg.value = `${arg.value ?? ''}${toAppend}`
+					setPropertyType(arg.value)
+					argInput?.focus()
+					return false
+				})
+			} else {
+				focusProp(argName, 'insert', (path) => {
+					arg.expr = path
+					arg.type = 'javascript'
+					propertyType = 'javascript'
+					return true
+				})
+			}
+			argInput?.recomputeSize()
+		}
+	}
 	const { focusProp } = getContext<PropPickerWrapperContext>('PropPickerWrapper')
 </script>
 
@@ -126,6 +148,7 @@
 				on:click={() => {
 					focusProp(argName, 'connect', (path) => {
 						connectProperty(path)
+						return false
 					})
 				}}
 			>
@@ -139,21 +162,8 @@
 
 	{#if propertyType === undefined || !checked}
 		<ArgInput
-			on:focus={() => {
-				if (isStaticTemplate(inputCat)) {
-					focusProp(argName, 'append', (path) => {
-						const toAppend = `\$\{${path}}`
-						arg.value = `${arg.value ?? ''}${toAppend}`
-						setPropertyType(arg.value)
-					})
-				} else {
-					focusProp(argName, 'insert', (path) => {
-						arg.expr = path
-						arg.type = 'javascript'
-						propertyType = 'javascript'
-					})
-				}
-			}}
+			bind:this={argInput}
+			on:focus={() => onFocus()}
 			label={argName}
 			bind:editor={monaco}
 			bind:description={schema.properties[argName].description}
@@ -184,6 +194,7 @@
 					on:focus={() => {
 						focusProp(argName, 'insert', (path) => {
 							monaco?.insertAtCursor(path)
+							return false
 						})
 					}}
 					bind:code={arg.expr}

frontend/src/lib/components/flows/propPicker/PropPickerWrapper.svelte

@@ -1,7 +1,7 @@
 <script context="module" lang="ts">
 	type InsertionMode = 'append' | 'connect' | 'insert'
 
-	type SelectCallback = (path: string) => void
+	type SelectCallback = (path: string) => boolean
 
 	type PropPickerConfig = {
 		insertionMode: InsertionMode
@@ -53,8 +53,9 @@
 			{pickableProperties}
 			on:select={({ detail }) => {
 				dispatch('select', detail)
-				$propPickerConfig?.onSelect(detail)
-				propPickerConfig.set(undefined)
+				if ($propPickerConfig?.onSelect(detail)) {
+					propPickerConfig.set(undefined)
+				}
 			}}
 		/>
 	</Pane>