feat: update tests and fix handling of selected item

Selected item was jumping when scrolling up because of focus.

Hook to the up/down arrows on a document level instead of section level.

Author: garthdw

app/components/AppHeader.vue

@@ -92,7 +92,7 @@ onKeyStroke(',', e => {
       <div class="flex-1 flex items-center justify-center gap-4 sm:gap-6">
         <!-- Search bar (shown on all pages except home and search) -->
         <search v-if="showSearchBar" class="hidden sm:block flex-1 max-w-md">
-          <form method="GET" action="/search" class="relative" @submit.prevent="handleSearchInput">
+          <form method="GET" action="/search" class="relative">
             <label for="header-search" class="sr-only">
               {{ $t('search.label') }}
             </label>

app/pages/search.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { formatNumber } from '#imports'
+import { onKeyDown } from '@vueuse/core'
 import { debounce } from 'perfect-debounce'
 import { isValidNewPackageName, checkPackageExists } from '~/utils/package-name'
 import { isPlatformSpecificPackage } from '~/utils/platform-packages'
@@ -595,50 +596,22 @@ function scrollToSelectedItem() {
   }
 }
 
-function focusSelectedItem() {
-  const suggIdx = toSuggestionIndex(unifiedSelectedIndex.value)
-  const pkgIdx = toPackageIndex(unifiedSelectedIndex.value)
-
-  nextTick(() => {
-    if (suggIdx !== null) {
-      const el = document.querySelector<HTMLElement>(`[data-suggestion-index="${suggIdx}"]`)
-      el?.focus()
-    } else if (pkgIdx !== null) {
-      scrollToSelectedItem()
-      nextTick(() => {
-        const el = document.querySelector<HTMLElement>(`[data-result-index="${pkgIdx}"]`)
-        el?.focus()
-      })
-    }
-  })
-}
-
 function handleResultsKeydown(e: KeyboardEvent) {
   if (totalSelectableCount.value <= 0) return
 
-  const isFromInput = (e.target as HTMLElement).tagName === 'INPUT'
-
   if (e.key === 'ArrowDown') {
     e.preventDefault()
     userHasNavigated.value = true
     unifiedSelectedIndex.value = clampUnifiedIndex(unifiedSelectedIndex.value + 1)
-    if (isFromInput) {
-      scrollToSelectedItem()
-    } else {
-      focusSelectedItem()
-    }
+    scrollToSelectedItem()
     return
   }
 
   if (e.key === 'ArrowUp') {
     e.preventDefault()
     userHasNavigated.value = true
     unifiedSelectedIndex.value = clampUnifiedIndex(unifiedSelectedIndex.value - 1)
-    if (isFromInput) {
-      scrollToSelectedItem()
-    } else {
-      focusSelectedItem()
-    }
+    scrollToSelectedItem()
     return
   }
 
@@ -664,6 +637,8 @@ function handleResultsKeydown(e: KeyboardEvent) {
   }
 }
 
+onKeyDown(['ArrowDown', 'ArrowUp', 'Enter'], handleResultsKeydown)
+
 function handleSuggestionSelect(index: number) {
   // Convert suggestion index to unified index
   unifiedSelectedIndex.value = -(suggestionCount.value - index)
@@ -688,7 +663,7 @@ defineOgImageComponent('Default', {
   <main class="overflow-x-hidden">
     <!-- Results area with container padding -->
     <div class="container-sm py-6">
-      <section v-if="query" :aria-label="$t('search.results')" @keydown="handleResultsKeydown">
+      <section v-if="query" :aria-label="$t('search.results')">
         <!-- Initial loading (only after user interaction, not during view transition) -->
         <LoadingSpinner v-if="showSearching" :text="$t('search.searching')" />
 

tests/interactions.spec.ts

@@ -6,12 +6,13 @@ test.describe('Search Pages', () => {
 
     await expect(page.locator('text=/found \\d+/i')).toBeVisible()
 
-    const searchInput = page.locator('input[type="search"]')
-    await expect(searchInput).toBeFocused()
-
     const firstResult = page.locator('[data-result-index="0"]').first()
     await expect(firstResult).toBeVisible()
 
+    const searchInput = page.locator('input[type="search"]')
+    // manually focus search
+    await searchInput.focus()
+
     // ArrowDown changes visual selection but keeps focus in input
     await page.keyboard.press('ArrowDown')
     await expect(searchInput).toBeFocused()
@@ -35,4 +36,17 @@ test.describe('Search Pages', () => {
     await page.keyboard.press('/')
     await expect(page.locator('input[type="search"]')).toBeFocused()
   })
+
+  test('/settings → search, keeps focus on search input', async ({ page, goto }) => {
+    await goto('/settings', { waitUntil: 'domcontentloaded' })
+
+    const searchInput = page.locator('input[type="search"]')
+    await searchInput.fill('vue')
+
+    await page.waitForLoadState('domcontentloaded')
+
+    await expect(page.locator('text=/found \\d+/i')).toBeVisible()
+
+    await expect(searchInput).toBeFocused()
+  })
 })