fix: only search on enter keypress

app/components/Header/SearchBox.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { debounce } from 'perfect-debounce'
 import { normalizeSearchParam } from '#shared/utils/url'
 
 withDefaults(
@@ -15,7 +14,6 @@ const emit = defineEmits(['blur', 'focus'])
 
 const router = useRouter()
 const route = useRoute()
-const { isAlgolia } = useSearchProvider()
 
 const isSearchFocused = shallowRef(false)
 
@@ -29,17 +27,13 @@ const searchQuery = shallowRef(normalizeSearchParam(route.query.q))
 // Pages that have their own local filter using ?q
 const pagesWithLocalFilter = new Set(['~username', 'org'])
 
-function updateUrlQueryImpl(value: string) {
+function updateUrlQuery(value: string) {
   // Don't navigate away from pages that use ?q for local filtering
-  if (pagesWithLocalFilter.has(route.name as string)) {
+  if (pagesWithLocalFilter.has(route.name)) {
     return
   }
   if (route.name === 'search') {
     router.replace({ query: { q: value || undefined } })
-    return
-  }
-  if (!value) {
-    return
   }
 
   router.push({
@@ -50,26 +44,17 @@ function updateUrlQueryImpl(value: string) {
   })
 }
 
-const updateUrlQueryNpm = debounce(updateUrlQueryImpl, 250)
-const updateUrlQueryAlgolia = debounce(updateUrlQueryImpl, 80)
-
-const updateUrlQuery = Object.assign(
-  (value: string) => (isAlgolia.value ? updateUrlQueryAlgolia : updateUrlQueryNpm)(value),
-  {
-    flush: () => (isAlgolia.value ? updateUrlQueryAlgolia : updateUrlQueryNpm).flush(),
-  },
-)
-
 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)
@@ -80,15 +65,25 @@ 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: query },
+    })
+    return
+  }
+
+  if (route.name === 'search') {
+    return
+  }
+
+  if (query) {
     router.push({
       name: 'search',
-      query: {
-        q: searchQuery.value,
-      },
+      query: { q: query },
     })
-  } else {
-    updateUrlQuery.flush()
   }
 }
 

app/pages/index.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { debounce } from 'perfect-debounce'
 import { SHOWCASED_FRAMEWORKS } from '~/utils/frameworks'
 
 const { isAlgolia } = useSearchProvider()
@@ -12,18 +11,14 @@
   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 handleInputNpm = debounce(search, 250, { leading: true, trailing: true })
 const handleInputAlgolia = debounce(search, 80, { leading: true, trailing: true })
 
 function handleInput() {
   if (isTouchDevice()) {
     search()
   } else if (isAlgolia.value) {
@@ -105,7 +100,6 @@
                   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({