update search results

src/components/Search/SearchBar.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { notes, findNotes, setActiveNote } from '@/composables/useNotes'
+import SearchResult from '@/components/Search/SearchResult.vue'
 
 const emit = defineEmits<{
   active: [active: boolean]
@@ -19,7 +20,8 @@ const results = computed<Note[]>(() => {
   return query.value ? findNotes(query.value) : notes.value
 })
 
-const goToNote = (note: Note) => {
+const goToNote = (note: Note, element?: HTMLElement) => {
+  console.log(element)
   setActiveNote(note.id)
   active.value = false
   if (queryElem.value) queryElem.value.blur()
@@ -40,12 +42,16 @@ const handleKeydown = (event: KeyboardEvent) => {
     if (index + 1 > results.value.length) index = index - results.value.length
     if (index < 0) index = results.value.length - 1
     activeResult.value = results.value[index]
+    const element = resultsRefs.value[index].$el
+    if (['ArrowUp', 'ArrowDown', 'Tab'].includes(code)) element.scrollIntoView({ block: 'nearest' })
   } else if (code === 'Enter' && activeResult.value) {
     goToNote(activeResult.value)
   } else if (code === 'Escape' && queryElem.value) {
     queryElem.value.blur()
   }
 }
+
+const resultsRefs = ref<InstanceType<typeof SearchResult>[]>([])
 </script>
 <template>
   <div id="search-container" class="relative h-full flex-grow">
@@ -62,16 +68,19 @@ const handleKeydown = (event: KeyboardEvent) => {
     />
     <div class="z-1000 dropdown absolute left-0 right-0 top-[100%]" v-if="active">
       <ul tabindex="0" class="menu mt-1 w-full rounded-md bg-base-100 p-2 text-black shadow">
-        <template v-if="results.length > 0">
-          <SearchResult
-            v-for="result in results"
-            :key="result.id"
-            :result="result"
-            :active-result="activeResult"
-            @go-to-note="() => goToNote(result)"
-          />
-        </template>
-        <li v-else><a>No notes found</a></li>
+        <div class="max-h-[320px] w-full overflow-y-scroll">
+          <template v-if="results.length > 0">
+            <SearchResult
+              v-for="result in results"
+              :key="result.id"
+              :result="result"
+              :active-result="activeResult"
+              @go-to-note="(element) => goToNote(result, element)"
+              ref="resultsRefs"
+            />
+          </template>
+          <li v-else><a>No notes found</a></li>
+        </div>
       </ul>
     </div>
   </div>