Auto focus search input when adding component

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

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

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}