refactor: optimize search on update

Author: MatteoGabriele

app/components/AppHeader.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { debounce } from 'perfect-debounce'
 import { isEditableElement } from '~/utils/input'
 
 withDefaults(
@@ -16,30 +17,31 @@ const showFullSearch = shallowRef(false)
 const showMobileMenu = shallowRef(false)
 
 // On mobile, clicking logo+search button expands search
-const route = useRoute()
 const isMobile = useIsMobile()
 const isSearchExpandedManually = shallowRef(false)
 const searchBoxRef = useTemplateRef('searchBoxRef')
 
-const searchQuery = shallowRef('')
+const route = useRoute()
+const searchQuery = shallowRef<string>(normalizeSearchParam(route.query.q))
+
 watch(
   () => route.query.q,
   queryValue => {
-    searchQuery.value = normalizeSearchParam(queryValue)
+    if (queryValue !== searchQuery.value) {
+      searchQuery.value = normalizeSearchParam(queryValue)
+    }
   },
-  { immediate: true },
 )
 
-async function handleSearchSubmit() {
-  if (!searchQuery.value) {
-    return
+const router = useRouter()
+const onSearchQueryUpdate = debounce((newSearchQuery: string) => {
+  if (newSearchQuery !== searchQuery.value) {
+    router.replace({
+      name: 'search',
+      query: { q: newSearchQuery === '' ? undefined : newSearchQuery },
+    })
   }
-
-  await navigateTo({
-    name: 'search',
-    query: { q: searchQuery.value },
-  })
-}
+}, 500)
 
 // On search page, always show search expanded on mobile
 const isOnHomePage = computed(() => route.name === 'index')
@@ -147,8 +149,8 @@ onKeyStroke(
           ref="searchBoxRef"
           class="max-w-sm"
           compact
-          v-model="searchQuery"
-          @submit="handleSearchSubmit"
+          :model-value="searchQuery"
+          @update:model-value="onSearchQueryUpdate"
           @focus="handleSearchFocus"
           @blur="handleSearchBlur"
         />

app/pages/search.vue

@@ -573,6 +573,24 @@ watch(displayResults, results => {
 })
 
 function handleResultsKeydown(e: KeyboardEvent) {
+  // If the active element is an input, navigate to exact match or wait for results
+  if (e.key === 'Enter' && document.activeElement?.tagName === 'INPUT') {
+    // Get value directly from input (not from route query, which may be debounced)
+    const inputValue = (document.activeElement as HTMLInputElement).value.trim()
+    if (!inputValue) return
+
+    // Check if first result matches the input value exactly
+    const firstResult = displayResults.value[0]
+    if (firstResult?.package.name === inputValue) {
+      pendingEnterQuery.value = null
+      return navigateToPackage(firstResult.package.name)
+    }
+
+    // No match yet - store input value, watcher will handle navigation when results arrive
+    pendingEnterQuery.value = inputValue
+    return
+  }
+
   if (totalSelectableCount.value <= 0) return
 
   const elements = getFocusableElements()