From d9d63a4e31c05c6d8db7a7a8420e9da8587dfa68 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Mon, 11 Nov 2024 10:34:12 +0100
Subject: [PATCH] fix autocomplete z-indez on flow editor

---
 frontend/src/lib/components/ArgInput.svelte          | 12 ++++++++++++
 .../src/lib/components/InputTransformForm.svelte     |  9 ++++++---
 .../lib/components/InputTransformSchemaForm.svelte   |  2 +-
 3 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/frontend/src/lib/components/ArgInput.svelte b/frontend/src/lib/components/ArgInput.svelte
index bbaf166e0d..a1b41f2d35 100644
--- a/frontend/src/lib/components/ArgInput.svelte
+++ b/frontend/src/lib/components/ArgInput.svelte
@@ -418,6 +418,9 @@
 									bind:selected={value}
 									options={itemsType?.multiselect ?? []}
 									selectedOptionsDraggable={true}
+									on:open={() => {
+										dispatch('focus')
+									}}
 								/>
 							</div>
 						{:else if itemsType?.enum != undefined && Array.isArray(itemsType?.enum) && Array.isArray(value)}
@@ -428,6 +431,9 @@
 									bind:selected={value}
 									options={itemsType?.enum ?? []}
 									selectedOptionsDraggable={true}
+									on:open={() => {
+										dispatch('focus')
+									}}
 								/>
 							</div>
 						{:else}
@@ -816,6 +822,12 @@
 						bind:value
 						{enum_}
 						{autofocus}
+						on:focus={() => {
+							dispatch('focus')
+						}}
+						on:blur={(e) => {
+							dispatch('blur')
+						}}
 						enumLabels={extra['enumLabels']}
 					/>
 				</div>
diff --git a/frontend/src/lib/components/InputTransformForm.svelte b/frontend/src/lib/components/InputTransformForm.svelte
index 07a7ee534d..c0429a8284 100644
--- a/frontend/src/lib/components/InputTransformForm.svelte
+++ b/frontend/src/lib/components/InputTransformForm.svelte
@@ -279,7 +279,7 @@
 		class={twMerge(
 			'pl-2 pt-2 pb-2 ml-2 relative hover:bg-surface hover:shadow-md transition-all duration-200',
 			$propPickerConfig?.propName == argName
-				? 'bg-surface border-l-4 border-blue-500 shadow-md rounded-l-md z-2000'
+				? 'bg-surface border-l-4 border-blue-500 shadow-md rounded-l-md z-50 '
 				: 'hover:rounded-md',
 			$$props.class
 		)}
@@ -565,10 +565,13 @@
 				</div>
 
 				{#if $propPickerConfig?.propName == argName}
-					<div class="text-blue-500 mt-2" in:fade={{ duration: 200 }}>
+					<div
+						class="text-blue-500 absolute top-2 lg:-right-2.5 -right-1"
+						in:fade={{ duration: 200 }}
+					>
 						<svg
 							xmlns="http://www.w3.org/2000/svg"
-							width="14"
+							width="16"
 							height="24"
 							viewBox="0 0 24 24"
 							fill="currentColor"
diff --git a/frontend/src/lib/components/InputTransformSchemaForm.svelte b/frontend/src/lib/components/InputTransformSchemaForm.svelte
index e9a0f4899d..12c85c05c6 100644
--- a/frontend/src/lib/components/InputTransformSchemaForm.svelte
+++ b/frontend/src/lib/components/InputTransformSchemaForm.svelte
@@ -86,7 +86,7 @@
 	{#if keys.length > 0}
 		{#each keys as argName (argName)}
 			{#if (!filter || filter.includes(argName)) && Object.keys(schema.properties ?? {}).includes(argName)}
-				<div class="z-10 pt-2 relative">
+				<div class="pt-2 relative">
 					<InputTransformForm
 						{previousModuleId}
 						bind:arg={args[argName]}