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>

src/components/Search/SearchResult.vue

@@ -8,30 +8,27 @@ const props = defineProps<{
 }>()
 
 const emit = defineEmits<{
-  goToNote: []
+  goToNote: [element: HTMLElement | null]
 }>()
 
-console.log(props.activeResult)
+const element = ref<HTMLElement | null>(null)
 </script>
 <template>
-  <li class="flex flex-row">
+  <li class="flex w-full flex-row" ref="element">
     <a
-      class="flex-grow items-center px-2 py-1"
-      @click.stop.prevent="() => emit('goToNote')"
+      class="items-center px-2 py-1 w-full"
+      @click.stop.prevent="() => emit('goToNote', element)"
       @mousedown.prevent
       :class="{
         disabled: activeNote?.id === result.id,
-        active: props.activeResult?.id === result.id,
+        active: props.activeResult?.id === result.id
       }"
     >
-      <span
-        class="badge-ghost badge badge-sm mr-0.5"
-        v-if="activeNote?.id === result.id"
-      >
+      <span class="badge-ghost badge badge-sm mr-0.5" v-if="activeNote?.id === result.id">
         current
       </span>
-      <span class="flex-grow">{{ result.title }}</span>
-      <span>{{ formatDate(result.modified) }}</span>
+      <span class="flex-grow overflow-hidden whitespace-nowrap">{{ result.title }}</span>
+      <span class="whitespace-nowrap">{{ formatDate(result.modified) }}</span>
     </a>
   </li>
 </template>