fix: enable scrolling in virtual list

Author: danielroe

app/app.vue

@@ -17,7 +17,11 @@ function handleGlobalKeydown(e: KeyboardEvent) {
   const isEditableTarget =
     target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable
 
-  if (e.key === '/' && !target.isContentEditable) {
+  if (isEditableTarget) {
+    return
+  }
+
+  if (e.key === '/') {
     e.preventDefault()
 
     // Try to find and focus search input on current page
@@ -31,11 +35,6 @@ function handleGlobalKeydown(e: KeyboardEvent) {
     }
 
     router.push('/search')
-    return
-  }
-
-  if (isEditableTarget) {
-    return
   }
 }
 

app/components/PackageCard.vue

@@ -19,14 +19,17 @@ const emit = defineEmits<{
 </script>
 
 <template>
-  <article class="group card-interactive" :class="{ 'bg-bg-muted border-border-hover': selected }">
+  <article
+    class="group card-interactive scroll-mt-48 scroll-mb-6"
+    :class="{ 'bg-bg-muted border-border-hover': selected }"
+  >
     <NuxtLink
       :to="{ name: 'package', params: { package: result.package.name.split('/') } }"
       :prefetch-on="prefetch ? 'visibility' : 'interaction'"
-      class="block focus:outline-none decoration-none"
+      class="block focus:outline-none decoration-none scroll-mt-48 scroll-mb-6"
       :data-result-index="index"
-      @focus="emit('focus', index)"
-      @mouseenter="emit('focus', index)"
+      @focus="index != null && emit('focus', index)"
+      @mouseenter="index != null && emit('focus', index)"
     >
       <header class="flex items-start justify-between gap-4 mb-2">
         <component

app/components/PackageList.vue

@@ -82,6 +82,14 @@ watch(
     }
   },
 )
+
+function scrollToIndex(index: number, smooth = true) {
+  listRef.value?.scrollToIndex(index, { align: 'center', smooth })
+}
+
+defineExpose({
+  scrollToIndex,
+})
 </script>
 
 <template>

app/composables/useVirtualInfiniteScroll.ts

@@ -5,7 +5,10 @@ export interface WindowVirtualizerHandle {
   readonly viewportSize: number
   findItemIndex: (offset: number) => number
   getItemOffset: (index: number) => number
-  scrollToIndex: (index: number, opts?: { align?: 'start' | 'center' | 'end' }) => void
+  scrollToIndex: (
+    index: number,
+    opts?: { align?: 'start' | 'center' | 'end'; smooth?: boolean },
+  ) => void
 }
 
 export interface UseVirtualInfiniteScrollOptions {

app/pages/search.vue

@@ -48,6 +48,7 @@ const isSearchFocused = ref(false)
 const searchInputRef = ref<HTMLInputElement>()
 
 const selectedIndex = ref(0)
+const packageListRef = useTemplateRef('packageListRef')
 
 const resultCount = computed(() => visibleResults.value?.objects.length ?? 0)
 
@@ -56,25 +57,46 @@ function clampIndex(next: number) {
   return Math.max(0, Math.min(resultCount.value - 1, next))
 }
 
+function scrollToSelectedResult() {
+  // Use virtualizer's scrollToIndex to ensure the item is rendered and visible
+  packageListRef.value?.scrollToIndex(selectedIndex.value)
+}
+
 function focusSelectedResult() {
-  const el = document.querySelector<HTMLElement>(`[data-result-index="${selectedIndex.value}"]`)
-  el?.focus()
+  // First ensure the item is rendered by scrolling to it
+  scrollToSelectedResult()
+  // Then focus it after a tick to allow rendering
+  nextTick(() => {
+    const el = document.querySelector<HTMLElement>(`[data-result-index="${selectedIndex.value}"]`)
+    el?.focus()
+  })
 }
 
 function handleResultsKeydown(e: KeyboardEvent) {
   if (resultCount.value <= 0) return
 
+  const isFromInput = (e.target as HTMLElement).tagName === 'INPUT'
+
   if (e.key === 'ArrowDown') {
     e.preventDefault()
     selectedIndex.value = clampIndex(selectedIndex.value + 1)
-    focusSelectedResult()
+    // Only move focus if already in results, not when typing in search input
+    if (isFromInput) {
+      scrollToSelectedResult()
+    } else {
+      focusSelectedResult()
+    }
     return
   }
 
   if (e.key === 'ArrowUp') {
     e.preventDefault()
     selectedIndex.value = clampIndex(selectedIndex.value - 1)
-    focusSelectedResult()
+    if (isFromInput) {
+      scrollToSelectedResult()
+    } else {
+      focusSelectedResult()
+    }
     return
   }
 
@@ -198,13 +220,10 @@ watch(query, () => {
   hasInteracted.value = true
 })
 
-watch(
-  () => visibleResults.value?.objects,
-  objects => {
-    if (!objects?.length) return
-    selectedIndex.value = 0
-  },
-)
+// Reset selection when query changes (new search)
+watch(query, () => {
+  selectedIndex.value = 0
+})
 
 // Check if current query could be a valid package name
 const isValidPackageName = computed(() => isValidNewPackageName(query.value.trim()))
@@ -423,6 +442,7 @@ defineOgImageComponent('Default', {
 
           <PackageList
             v-if="visibleResults.objects.length > 0"
+            ref="packageListRef"
             :results="visibleResults.objects"
             :selected-index="selectedIndex"
             heading-level="h2"