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

components/collections/Add.vue

@@ -9,6 +9,7 @@
           class="input floating-input"
           placeholder=" "
           type="text"
+          autocomplete="off"
           @keyup.enter="addNewCollection"
         />
         <label for="selectLabelAdd">

components/collections/AddFolder.vue

@@ -13,6 +13,7 @@
           class="input floating-input"
           placeholder=" "
           type="text"
+          autocomplete="off"
           @keyup.enter="addFolder"
         />
         <label for="selectLabelAddFolder">

components/collections/ChooseType.vue

@@ -16,6 +16,7 @@
             <select
               id="team"
               type="text"
+              autocomplete="off"
               autofocus
               class="
                 bg-transparent

components/collections/Edit.vue

@@ -9,6 +9,7 @@
           class="input floating-input"
           placeholder=" "
           type="text"
+          autocomplete="off"
           @keyup.enter="saveCollection"
         />
         <label for="selectLabelEdit">

components/collections/EditFolder.vue

@@ -13,6 +13,7 @@
           class="input floating-input"
           placeholder=" "
           type="text"
+          autocomplete="off"
           @keyup.enter="editFolder"
         />
         <label for="selectLabelEditFolder">

components/collections/EditRequest.vue

@@ -9,6 +9,7 @@
           class="input floating-input"
           placeholder=" "
           type="text"
+          autocomplete="off"
           @keyup.enter="saveRequest"
         />
         <label for="selectLabelEditReq">

components/collections/ImportExport.vue

@@ -127,6 +127,7 @@
         <div class="select-wrapper">
           <select
             type="text"
+            autocomplete="off"
             class="select"
             autofocus
             @change="

components/collections/SaveRequest.vue

@@ -10,6 +10,7 @@
             class="input floating-input"
             placeholder=" "
             type="text"
+            autocomplete="off"
             @keyup.enter="saveRequestAs"
           />
           <label for="selectLabelSaveReq">

components/collections/graphql/Add.vue

@@ -9,6 +9,7 @@
           class="input floating-input"
           placeholder=" "
           type="text"
+          autocomplete="off"
           @keyup.enter="addNewCollection"
         />
         <label for="selectLabelGqlAdd">

components/collections/graphql/AddFolder.vue

@@ -13,6 +13,7 @@
           class="input floating-input"
           placeholder=" "
           type="text"
+          autocomplete="off"
           @keyup.enter="addFolder"
         />
         <label for="selectLabelGqlAddFolder">

components/collections/graphql/Edit.vue

@@ -9,6 +9,7 @@
           class="input floating-input"
           placeholder=" "
           type="text"
+          autocomplete="off"
           @keyup.enter="saveCollection"
         />
         <label for="selectLabelGqlEdit">

components/collections/graphql/EditFolder.vue

@@ -13,6 +13,7 @@
           class="input floating-input"
           placeholder=" "
           type="text"
+          autocomplete="off"
           @keyup.enter="editFolder"
         />
         <label for="selectLabelGqlEditFolder">

components/collections/graphql/EditRequest.vue

@@ -9,6 +9,7 @@
           class="input floating-input"
           placeholder=" "
           type="text"
+          autocomplete="off"
           @keyup.enter="saveRequest"
         />
         <label for="selectLabelGqlEditReq">

components/collections/graphql/index.vue

@@ -18,6 +18,7 @@
         v-if="showCollActions"
         v-model="filterText"
         type="search"
+        autocomplete="off"
         :placeholder="$t('action.search')"
         class="bg-transparent flex w-full py-2 px-4"
       />

components/collections/index.vue

@@ -20,6 +20,7 @@
         <input
           v-model="filterText"
           type="search"
+          autocomplete="off"
           :placeholder="$t('action.search')"
           class="bg-transparent flex w-full py-2 pr-2 pl-4"
         />

components/environments/Add.vue

@@ -9,6 +9,7 @@
           class="input floating-input"
           placeholder=" "
           type="text"
+          autocomplete="off"
           @keyup.enter="addNewEnvironment"
         />
         <label for="selectLabelEnvAdd">

components/environments/Edit.vue

@@ -10,6 +10,7 @@
             class="input floating-input"
             placeholder=" "
             type="text"
+            autocomplete="off"
             :disabled="editingEnvironmentIndex === 'Global'"
             @keyup.enter="saveEnvironment"
           />

components/firebase/Login.vue

@@ -35,7 +35,7 @@
             placeholder=" "
             type="email"
             name="email"
-            autocomplete="email"
+            autocomplete="off"
             required
             spellcheck="false"
             autofocus

components/graphql/Request.vue

@@ -6,6 +6,7 @@
         v-model="url"
         v-focus
         type="url"
+        autocomplete="off"
         spellcheck="false"
         class="
           bg-primaryLight

components/graphql/Sidebar.vue

@@ -7,6 +7,7 @@
             <input
               v-model="graphqlFieldsFilterText"
               type="search"
+              autocomplete="off"
               :placeholder="$t('action.search')"
               class="bg-transparent flex w-full p-4 py-2"
             />

components/history/index.vue

@@ -13,6 +13,7 @@
       <input
         v-model="filterText"
         type="search"
+        autocomplete="off"
         class="bg-transparent flex w-full p-4 py-2"
         :placeholder="$t('action.search')"
       />

components/http/Request.vue

@@ -84,6 +84,7 @@
           "
           name="url"
           type="text"
+          autocomplete="off"
           spellcheck="false"
           :placeholder="$t('request.url')"
           autofocus
@@ -166,6 +167,7 @@
             :placeholder="$t('request.name')"
             name="request-name"
             type="text"
+            autocomplete="off"
             class="mb-2 input"
             @keyup.enter="saveOptions.tippy().hide()"
           />

components/realtime/Mqtt.vue

@@ -11,6 +11,7 @@
                   v-model="url"
                   v-focus
                   type="url"
+                  autocomplete="off"
                   spellcheck="false"
                   class="
                     bg-primaryLight
@@ -69,6 +70,7 @@
             class="input"
             :placeholder="$t('mqtt.topic_name')"
             type="text"
+            autocomplete="off"
             spellcheck="false"
           />
         </div>
@@ -83,6 +85,7 @@
             v-model="msg"
             class="input"
             type="text"
+            autocomplete="off"
             :placeholder="$t('mqtt.message')"
             spellcheck="false"
           />
@@ -112,6 +115,7 @@
             id="sub_topic"
             v-model="sub_topic"
             type="text"
+            autocomplete="off"
             :placeholder="$t('mqtt.topic_name')"
             spellcheck="false"
             class="input"

components/realtime/Socketio.vue

@@ -12,6 +12,7 @@
                     v-model="url"
                     v-focus
                     type="url"
+                    autocomplete="off"
                     spellcheck="false"
                     :class="{ error: !urlValid }"
                     class="
@@ -94,6 +95,7 @@
             name="event_name"
             :placeholder="$t('socketio.event_name')"
             type="text"
+            autocomplete="off"
             :disabled="!connectionState"
           />
         </div>
@@ -123,6 +125,7 @@
                 name="message"
                 :placeholder="$t('count.message', { count: index + 1 })"
                 type="text"
+                autocomplete="off"
                 :disabled="!connectionState"
                 @keyup.enter="connectionState ? sendMessage() : null"
               />

components/realtime/Sse.vue

@@ -9,6 +9,7 @@
               v-model="server"
               v-focus
               type="url"
+              autocomplete="off"
               :class="{ error: !serverValid }"
               class="
                 bg-primaryLight

components/realtime/Websocket.vue

@@ -23,6 +23,7 @@
                     focus-visible:border-dividerDark
                   "
                   type="url"
+                  autocomplete="off"
                   spellcheck="false"
                   :class="{ error: !urlValid }"
                   :placeholder="$t('websocket.url')"
@@ -89,6 +90,7 @@
                 :placeholder="$t('count.protocol', { count: index + 1 })"
                 name="message"
                 type="text"
+                autocomplete="off"
               />
               <span>
                 <ButtonSecondary
@@ -174,6 +176,7 @@
             v-model="communication.input"
             name="message"
             type="text"
+            autocomplete="off"
             :disabled="!connectionState"
             :placeholder="$t('websocket.message')"
             class="input"

components/smart/AutoComplete.vue

@@ -4,6 +4,7 @@
       ref="acInput"
       v-model="text"
       type="text"
+      autocomplete="off"
       :placeholder="placeholder"
       :spellcheck="spellcheck"
       :autocapitalize="autocapitalize"

components/teams/Add.vue

@@ -9,6 +9,7 @@
           class="input floating-input"
           placeholder=" "
           type="text"
+          autocomplete="off"
           @keyup.enter="addNewTeam"
         />
         <label for="selectLabelTeamAdd">

components/teams/Edit.vue

@@ -10,6 +10,7 @@
             class="input floating-input"
             placeholder=" "
             type="text"
+            autocomplete="off"
             @keyup.enter="saveTeam"
           />
           <label for="selectLabelTeamEdit">