feat: disable autocomplete on inputs + keyboard navigation focus

components/app/Lunr.vue

@@ -3,6 +3,7 @@
     <AppSearchEntry
       v-for="(shortcut, shortcutIndex) in theOutput"
       :key="`shortcut-${shortcutIndex}`"
+      :ref="`item-${shortcutIndex}`"
       :shortcut="shortcut"
       @action="$emit('action', shortcut.action)"
     />
@@ -62,6 +63,7 @@ export default {
       outputHash: "",
       theOutput: [],
       cache: {},
+      currentItem: -1,
     }
   },
   computed: {
@@ -119,6 +121,12 @@ export default {
       immediate: true,
     },
   },
+  mounted() {
+    document.addEventListener("keydown", this.nextItem)
+  },
+  destroyed() {
+    document.removeEventListener("keydown", this.nextItem)
+  },
   methods: {
     async output(search) {
       const that = this
@@ -196,6 +204,24 @@ export default {
       const hex = val.toString(16).toUpperCase()
       return `00000000${hex}`.slice(-8)
     },
+    nextItem(e) {
+      if (e.keyCode === 38 && this.currentItem > 0) {
+        e.preventDefault()
+        this.currentItem--
+        this.$nextTick().then(() => {
+          this.$refs[`item-${this.currentItem}`][0].$el.focus()
+        })
+      } else if (
+        e.keyCode === 40 &&
+        this.currentItem < this.theOutput.length - 1
+      ) {
+        e.preventDefault()
+        this.currentItem++
+        this.$nextTick().then(() => {
+          this.$refs[`item-${this.currentItem}`][0].$el.focus()
+        })
+      }
+    },
   },
 }
 </script>

components/app/Search.vue

@@ -6,6 +6,7 @@
         v-model="search"
         v-focus
         type="text"
+        autocomplete="off"
         name="command"
         :placeholder="$t('app.type_a_command_search')"
         class="

components/app/Shortcuts.vue

@@ -23,7 +23,7 @@
         <div class="flex flex-col my-4 mx-6">
           <input
             v-model="filterText"
-            type="search"
+            type="search" autocomplete="off"
             class="
               bg-primaryLight
               border border-dividerLight