From 68b20b69d4240339389dcbaafa90d80179aa408d Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 10 May 2022 18:48:43 +0100
Subject: [PATCH] Auto focus search input when adding component

---
 packages/bbui/src/Form/Core/Search.svelte                 | 3 +++
 packages/bbui/src/Form/Search.svelte                      | 2 ++
 .../components/new/_components/NewComponentPanel.svelte   | 8 +++++++-
 3 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/packages/bbui/src/Form/Core/Search.svelte b/packages/bbui/src/Form/Core/Search.svelte
index e6384e242a..f19c2a7f4c 100644
--- a/packages/bbui/src/Form/Core/Search.svelte
+++ b/packages/bbui/src/Form/Core/Search.svelte
@@ -8,6 +8,8 @@
   export let id = null
   export let updateOnChange = true
   export let quiet = false
+  export let inputRef
+
   const dispatch = createEventDispatcher()
   let focus = false
 
@@ -68,6 +70,7 @@
       type="search"
       class="spectrum-Textfield-input spectrum-Search-input"
       autocomplete="off"
+      bind:this={inputRef}
     />
   </div>
   <button
diff --git a/packages/bbui/src/Form/Search.svelte b/packages/bbui/src/Form/Search.svelte
index 25dd98306b..74ffeeb22a 100644
--- a/packages/bbui/src/Form/Search.svelte
+++ b/packages/bbui/src/Form/Search.svelte
@@ -10,6 +10,7 @@
   export let disabled = false
   export let updateOnChange = true
   export let quiet = false
+  export let inputRef
 
   const dispatch = createEventDispatcher()
   const onChange = e => {
@@ -25,6 +26,7 @@
     {value}
     {placeholder}
     {quiet}
+    bind:inputRef
     on:change={onChange}
     on:click
     on:input
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/new/_components/NewComponentPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/new/_components/NewComponentPanel.svelte
index 545126cd9c..9dce541752 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/new/_components/NewComponentPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/new/_components/NewComponentPanel.svelte
@@ -14,9 +14,11 @@
   } from "@budibase/bbui"
   import structure from "./componentStructure.json"
   import { store } from "builderStore"
+  import { onMount } from "svelte"
 
   let section = "components"
   let searchString
+  let searchRef
 
   $: enrichedStructure = enrichStructure(structure, $store.components)
   $: filteredStructure = filterStructure(
@@ -52,7 +54,6 @@
     if (!structure?.length) {
       return []
     }
-
     if (section === "components") {
       structure = structure.filter(category => category.name !== "Blocks")
     } else {
@@ -91,6 +92,10 @@
       notifications.error("Error creating component")
     }
   }
+
+  onMount(() => {
+    searchRef.focus()
+  })
 </script>
 
 <NavigationPanel
@@ -121,6 +126,7 @@
         placeholder="Search"
         value={searchString}
         on:change={e => (searchString = e.detail)}
+        bind:inputRef={searchRef}
       />
     </Layout>
   {/if}