fix: autofocus

Author: MatteoGabriele

app/components/AppHeader.vue

@@ -107,6 +107,7 @@ onKeyStroke(
       <div
         class="flex-1 flex items-center justify-center md:gap-6"
         :class="{ 'hidden sm:flex': !isSearchExpanded }"
+        v-if="!isOnHomePage"
       >
         <!-- Search bar (hidden on mobile unless expanded) -->
         <HeaderSearchBox

app/components/Header/SearchBox.vue

@@ -21,9 +21,13 @@ const showSearchBar = computed(() => {
 
 // Local input value (updates immediately as user types)
 const searchQuery = shallowRef('')
-onMounted(() => {
-  searchQuery.value = normalizeSearchParam(route.query.q)
-})
+watch(
+  () => route.query.q,
+  query => {
+    searchQuery.value = normalizeSearchParam(query)
+  },
+  { immediate: true },
+)
 
 // Pages that have their own local filter using ?q
 const pagesWithLocalFilter = new Set(['~username', 'org'])
@@ -57,6 +61,13 @@ function handleSearchFocus() {
 }
 
 const inputRef = useTemplateRef('inputRef')
+function focus() {
+  const input = inputRef.value
+  if (input) {
+    input.focus()
+    input.setSelectionRange(input.value.length, input.value.length)
+  }
+}
 
 function handleSubmit() {
   if (pagesWithLocalFilter.has(route.name as string)) {
@@ -70,13 +81,12 @@ function handleSubmit() {
     updateUrlQuery(searchQuery.value)
   }
 
-  inputRef.value?.focus()
+  focus()
 }
 
+onMounted(focus)
+
 // Expose focus method for parent components
-function focus() {
-  inputRef.value?.focus()
-}
 defineExpose({ focus })
 </script>
 <template>