From 24a1ae51ed4450275173e45c683bb5ff50db0766 Mon Sep 17 00:00:00 2001
From: Henri Courdent <122811744+hcourdent@users.noreply.github.com>
Date: Tue, 19 Mar 2024 09:39:06 +0100
Subject: [PATCH] Content search bar auto-selected (#3437)

* Content search auto-selected

* Update ContentSearch.svelte

* Update ContentSearch.svelte

---------

Co-authored-by: Ruben Fiszel <ruben@windmill.dev>
---
 frontend/src/lib/components/ContentSearch.svelte | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/frontend/src/lib/components/ContentSearch.svelte b/frontend/src/lib/components/ContentSearch.svelte
index 39e5af81cc..c282de51fa 100644
--- 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"
 							/>