fix: only search on enter keypress

app/components/Header/SearchBox.vue

@@ -28,39 +28,23 @@ const searchQuery = shallowRef(normalizeSearchParam(route.query.q))
 // Pages that have their own local filter using ?q
 const pagesWithLocalFilter = new Set(['~username', 'org'])
 
-// Debounced URL update for search query
 const updateUrlQuery = debounce((value: string) => {
-  // Don't navigate away from pages that use ?q for local filtering
-  if (pagesWithLocalFilter.has(route.name as string)) {
-    return
-  }
   if (route.name === 'search') {
     router.replace({ query: { q: value || undefined } })
-    return
-  }
-  if (!value) {
-    return
   }
-
-  router.push({
-    name: 'search',
-    query: {
-      q: value,
-    },
-  })
 }, 250)
 
-// Watch input and debounce URL updates
 watch(searchQuery, value => {
-  updateUrlQuery(value)
+  if (route.name === 'search') {
+    updateUrlQuery(value)
+  }
 })
 
 // Sync input with URL when navigating (e.g., back button)
 watch(
   () => route.query.q,
   urlQuery => {
-    // Don't sync from pages that use ?q for local filtering
-    if (pagesWithLocalFilter.has(route.name as string)) {
+    if (pagesWithLocalFilter.has(route.name)) {
       return
     }
     const value = normalizeSearchParam(urlQuery)
@@ -71,15 +55,26 @@ watch(
 )
 
 function handleSubmit() {
-  if (pagesWithLocalFilter.has(route.name as string)) {
+  const query = searchQuery.value.trim()
+  if (pagesWithLocalFilter.has(route.name)) {
+    if (!query) return
     router.push({
       name: 'search',
-      query: {
-        q: searchQuery.value,
-      },
+      query: { q: query },
     })
-  } else {
+    return
+  }
+
+  if (route.name === 'search') {
     updateUrlQuery.flush()
+    return
+  }
+
+  if (query) {
+    router.push({
+      name: 'search',
+      query: { q: query },
+    })
   }
 }
 

app/pages/index.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { debounce } from 'perfect-debounce'
 import { SHOWCASED_FRAMEWORKS } from '~/utils/frameworks'
 
 const searchQuery = shallowRef('')
@@ -10,18 +9,10 @@ async function search() {
   if (!query) return
   await navigateTo({
     path: '/search',
-    query: query ? { q: query } : undefined,
+    query: { q: query },
   })
-  const newQuery = searchQuery.value.trim()
-  if (newQuery !== query) {
-    await search()
-  }
 }
 
-const handleInput = isTouchDevice()
-  ? search
-  : debounce(search, 250, { leading: true, trailing: true })
-
 useSeoMeta({
   title: () => $t('seo.home.title'),
   ogTitle: () => $t('seo.home.title'),
@@ -94,7 +85,6 @@ defineOgImageComponent('Default', {
                   class="w-full ps-8 pe-24"
                   @focus="isSearchFocused = true"
                   @blur="isSearchFocused = false"
-                  @input="handleInput"
                 />
 
                 <ButtonBase

test/e2e/interactions.spec.ts

@@ -92,6 +92,8 @@ test.describe('Search Pages', () => {
     await homeSearchInput.click()
     await page.keyboard.type('vue')
 
+    await page.keyboard.press('Enter')
+
     // Wait for navigation to /search (debounce is 250ms)
     await expect(page).toHaveURL(/\/search/, { timeout: 10000 })
 
@@ -117,6 +119,8 @@ test.describe('Search Pages', () => {
     await searchInput.click()
     await searchInput.fill('vue')
 
+    await page.keyboard.press('Enter')
+
     await expect(page).toHaveURL(/\/search/, { timeout: 10000 })
 
     await expect(page.locator('[data-result-index="0"]').first()).toBeVisible({