Content search bar auto-selected (#3437)

* Content search auto-selected * Update ContentSearch.svelte * Update ContentSearch.svelte --------- Co-authored-by: Ruben Fiszel <[email protected]>
windmill-labs · Mar 19, 2024 · 24a1ae5 · 24a1ae5
1 parent 87b0112
commit 24a1ae5
Showing 1 changed file with 11 additions and 3 deletions.
diff --git a/frontend/src/lib/components/ContentSearch.svelte b/frontend/src/lib/components/ContentSearch.svelte
@@ -41,7 +41,14 @@
 
 	let searchKind: 'all' | 'scripts' | 'flows' | 'apps' | 'resources' = 'all'
 
-	let isOpen = false
+	let isOpen = false;
+    	let inputElement;
+
+        // Reactive statement to focus the input when the modal opens
+        $: if (isOpen && inputElement) {
+	  // Use a timeout to ensure focus after any animations or rendering
+	  setTimeout(() => inputElement.focus(), 0);
+        }
 
 	let scripts: undefined | { path: string; content: string }[] = undefined
 	let filteredScriptItems: { path: string; content: string; marked: any }[] = []
@@ -87,6 +94,7 @@
 					flows: getCounts(filteredFlowItems.length),
 					scripts: getCounts(filteredScriptItems.length)
 			  }
+
 </script>
 
 <SearchItems
@@ -194,8 +202,8 @@
 						<div class="relative text-tertiary grow min-w-[100px]">
 							<!-- svelte-ignore a11y-autofocus -->
 							<input
-								autofocus
-								placeholder={'Search in the content of resources, scripts, flows and apps'}
+								bind:this={inputElement}
+								placeholder="Search in the content of resources, scripts, flows and apps"
 								bind:value={search}
 								class="bg-surface !h-10 !px-4 !pr-10 !rounded-lg text-sm focus:outline-none"
 							/>