From 0a73072ff164dcf12673d5ca16bc0cce20fd8aeb Mon Sep 17 00:00:00 2001
From: Arjan Singh <1598641+arjansingh@users.noreply.github.com>
Date: Mon, 6 Oct 2025 16:32:27 -0700
Subject: [PATCH] feat(AssetBrowserModal): set initial focus to SearchBox
 (#5945)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary

Some quick design feedback.

## Changes

1. Fix the placeholder text so it's showing up correctly.
2. Make the SearchBox take initial focus when the modal is opened.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-5945-feat-AssetBrowserModal-set-initial-focus-to-SearchBox-2846d73d365081bfb3e0cde78c827d5f)
by [Unito](https://www.unito.io)
---
 src/components/input/SearchBox.stories.ts          |  4 ++--
 src/components/input/SearchBox.vue                 | 14 +++++++++-----
 src/locales/en/main.json                           |  2 +-
 .../assets/components/AssetBrowserModal.vue        |  1 +
 4 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/src/components/input/SearchBox.stories.ts b/src/components/input/SearchBox.stories.ts
index 845a62059..f339fa1e7 100644
--- a/src/components/input/SearchBox.stories.ts
+++ b/src/components/input/SearchBox.stories.ts
@@ -8,7 +8,7 @@ const meta: Meta<typeof SearchBox> = {
   component: SearchBox,
   tags: ['autodocs'],
   argTypes: {
-    placeHolder: {
+    placeholder: {
       control: 'text'
     },
     showBorder: {
@@ -22,7 +22,7 @@ const meta: Meta<typeof SearchBox> = {
     }
   },
   args: {
-    placeHolder: 'Search...',
+    placeholder: 'Search...',
     showBorder: false,
     size: 'md'
   }
diff --git a/src/components/input/SearchBox.vue b/src/components/input/SearchBox.vue
index bf05daf8b..5e82736d3 100644
--- a/src/components/input/SearchBox.vue
+++ b/src/components/input/SearchBox.vue
@@ -5,10 +5,10 @@
       ref="input"
       v-model="searchQuery"
       :aria-label="
-        placeHolder || t('templateWidgets.sort.searchPlaceholder', 'Search...')
+        placeholder || t('templateWidgets.sort.searchPlaceholder', 'Search...')
       "
       :placeholder="
-        placeHolder || t('templateWidgets.sort.searchPlaceholder', 'Search...')
+        placeholder || t('templateWidgets.sort.searchPlaceholder', 'Search...')
       "
       type="text"
       unstyled
@@ -19,17 +19,19 @@
 
 <script setup lang="ts">
 import InputText from 'primevue/inputtext'
-import { computed, ref } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 
 import { t } from '@/i18n'
 import { cn } from '@/utils/tailwindUtil'
 
 const {
-  placeHolder,
+  autofocus = false,
+  placeholder,
   showBorder = false,
   size = 'md'
 } = defineProps<{
-  placeHolder?: string
+  autofocus?: boolean
+  placeholder?: string
   showBorder?: boolean
   size?: 'md' | 'lg'
 }>()
@@ -43,6 +45,8 @@ const focusInput = () => {
   }
 }
 
+onMounted(() => autofocus && focusInput())
+
 const wrapperStyle = computed(() => {
   const baseClasses = [
     'relative flex w-full items-center gap-2',
diff --git a/src/locales/en/main.json b/src/locales/en/main.json
index c5103b9fa..d008db9af 100644
--- a/src/locales/en/main.json
+++ b/src/locales/en/main.json
@@ -1944,7 +1944,7 @@
     "connectionError": "Please check your connection and try again",
     "failedToCreateNode": "Failed to create node. Please try again or check console for details.",
     "noModelsInFolder": "No {type} available in this folder",
-    "searchAssetsPlaceholder": "Search assets...",
+    "searchAssetsPlaceholder": "Type to search...",
     "allModels": "All Models",
     "allCategory": "All {category}",
     "unknown": "Unknown",
diff --git a/src/platform/assets/components/AssetBrowserModal.vue b/src/platform/assets/components/AssetBrowserModal.vue
index fe4e91531..d0fe01a72 100644
--- a/src/platform/assets/components/AssetBrowserModal.vue
+++ b/src/platform/assets/components/AssetBrowserModal.vue
@@ -23,6 +23,7 @@
     <template #header>
       <SearchBox
         v-model="searchQuery"
+        :autofocus="true"
         size="lg"
         :placeholder="$t('assetBrowser.searchAssetsPlaceholder')"
         class="max-w-96"