From 04f9428267eee4461a78147d1faa07739065e005 Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Sun, 29 Aug 2021 16:44:18 +0530
Subject: [PATCH] feat: disable autocomplete on inputs + keyboard navigation
 focus

---
 components/app/Lunr.vue                       | 26 +++++++++++++++++++
 components/app/Search.vue                     |  1 +
 components/app/Shortcuts.vue                  |  2 +-
 components/collections/Add.vue                |  1 +
 components/collections/AddFolder.vue          |  1 +
 components/collections/ChooseType.vue         |  1 +
 components/collections/Edit.vue               |  1 +
 components/collections/EditFolder.vue         |  1 +
 components/collections/EditRequest.vue        |  1 +
 components/collections/ImportExport.vue       |  1 +
 components/collections/SaveRequest.vue        |  1 +
 components/collections/graphql/Add.vue        |  1 +
 components/collections/graphql/AddFolder.vue  |  1 +
 components/collections/graphql/Edit.vue       |  1 +
 components/collections/graphql/EditFolder.vue |  1 +
 .../collections/graphql/EditRequest.vue       |  1 +
 components/collections/graphql/index.vue      |  1 +
 components/collections/index.vue              |  1 +
 components/environments/Add.vue               |  1 +
 components/environments/Edit.vue              |  1 +
 components/firebase/Login.vue                 |  2 +-
 components/graphql/Request.vue                |  1 +
 components/graphql/Sidebar.vue                |  1 +
 components/history/index.vue                  |  1 +
 components/http/Request.vue                   |  2 ++
 components/realtime/Mqtt.vue                  |  4 +++
 components/realtime/Socketio.vue              |  3 +++
 components/realtime/Sse.vue                   |  1 +
 components/realtime/Websocket.vue             |  3 +++
 components/smart/AutoComplete.vue             |  1 +
 components/teams/Add.vue                      |  1 +
 components/teams/Edit.vue                     |  1 +
 pages/settings.vue                            |  1 +
 33 files changed, 66 insertions(+), 2 deletions(-)

diff --git a/components/app/Lunr.vue b/components/app/Lunr.vue
index 19e8ec7a3..d7014a0aa 100644
--- a/components/app/Lunr.vue
+++ b/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>
diff --git a/components/app/Search.vue b/components/app/Search.vue
index f3964d27f..2a9048bfe 100644
--- a/components/app/Search.vue
+++ b/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="
diff --git a/components/app/Shortcuts.vue b/components/app/Shortcuts.vue
index 23d9ae372..1a27f422f 100644
--- a/components/app/Shortcuts.vue
+++ b/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
diff --git a/components/collections/Add.vue b/components/collections/Add.vue
index 66bdc871c..92133e317 100644
--- a/components/collections/Add.vue
+++ b/components/collections/Add.vue
@@ -9,6 +9,7 @@
           class="input floating-input"
           placeholder=" "
           type="text"
+          autocomplete="off"
           @keyup.enter="addNewCollection"
         />
         <label for="selectLabelAdd">
diff --git a/components/collections/AddFolder.vue b/components/collections/AddFolder.vue
index a093e5fe6..3517fdc12 100644
--- a/components/collections/AddFolder.vue
+++ b/components/collections/AddFolder.vue
@@ -13,6 +13,7 @@
           class="input floating-input"
           placeholder=" "
           type="text"
+          autocomplete="off"
           @keyup.enter="addFolder"
         />
         <label for="selectLabelAddFolder">
diff --git a/components/collections/ChooseType.vue b/components/collections/ChooseType.vue
index 09077fa12..3bea3010e 100644
--- a/components/collections/ChooseType.vue
+++ b/components/collections/ChooseType.vue
@@ -16,6 +16,7 @@
             <select
               id="team"
               type="text"
+              autocomplete="off"
               autofocus
               class="
                 bg-transparent
diff --git a/components/collections/Edit.vue b/components/collections/Edit.vue
index fedf56d41..54b76f16b 100644
--- a/components/collections/Edit.vue
+++ b/components/collections/Edit.vue
@@ -9,6 +9,7 @@
           class="input floating-input"
           placeholder=" "
           type="text"
+          autocomplete="off"
           @keyup.enter="saveCollection"
         />
         <label for="selectLabelEdit">
diff --git a/components/collections/EditFolder.vue b/components/collections/EditFolder.vue
index 96409cb1b..2cee4e9bf 100644
--- a/components/collections/EditFolder.vue
+++ b/components/collections/EditFolder.vue
@@ -13,6 +13,7 @@
           class="input floating-input"
           placeholder=" "
           type="text"
+          autocomplete="off"
           @keyup.enter="editFolder"
         />
         <label for="selectLabelEditFolder">
diff --git a/components/collections/EditRequest.vue b/components/collections/EditRequest.vue
index 7f82aac3b..44e240ed0 100644
--- a/components/collections/EditRequest.vue
+++ b/components/collections/EditRequest.vue
@@ -9,6 +9,7 @@
           class="input floating-input"
           placeholder=" "
           type="text"
+          autocomplete="off"
           @keyup.enter="saveRequest"
         />
         <label for="selectLabelEditReq">
diff --git a/components/collections/ImportExport.vue b/components/collections/ImportExport.vue
index 09036dceb..f21a5c5c9 100644
--- a/components/collections/ImportExport.vue
+++ b/components/collections/ImportExport.vue
@@ -127,6 +127,7 @@
         <div class="select-wrapper">
           <select
             type="text"
+            autocomplete="off"
             class="select"
             autofocus
             @change="
diff --git a/components/collections/SaveRequest.vue b/components/collections/SaveRequest.vue
index 9a8722394..f9f39c09c 100644
--- a/components/collections/SaveRequest.vue
+++ b/components/collections/SaveRequest.vue
@@ -10,6 +10,7 @@
             class="input floating-input"
             placeholder=" "
             type="text"
+            autocomplete="off"
             @keyup.enter="saveRequestAs"
           />
           <label for="selectLabelSaveReq">
diff --git a/components/collections/graphql/Add.vue b/components/collections/graphql/Add.vue
index 86ee7374b..ee92ccb4a 100644
--- a/components/collections/graphql/Add.vue
+++ b/components/collections/graphql/Add.vue
@@ -9,6 +9,7 @@
           class="input floating-input"
           placeholder=" "
           type="text"
+          autocomplete="off"
           @keyup.enter="addNewCollection"
         />
         <label for="selectLabelGqlAdd">
diff --git a/components/collections/graphql/AddFolder.vue b/components/collections/graphql/AddFolder.vue
index 5982c6d2e..e507b5c5b 100644
--- a/components/collections/graphql/AddFolder.vue
+++ b/components/collections/graphql/AddFolder.vue
@@ -13,6 +13,7 @@
           class="input floating-input"
           placeholder=" "
           type="text"
+          autocomplete="off"
           @keyup.enter="addFolder"
         />
         <label for="selectLabelGqlAddFolder">
diff --git a/components/collections/graphql/Edit.vue b/components/collections/graphql/Edit.vue
index eb84632b6..5c34741ab 100644
--- a/components/collections/graphql/Edit.vue
+++ b/components/collections/graphql/Edit.vue
@@ -9,6 +9,7 @@
           class="input floating-input"
           placeholder=" "
           type="text"
+          autocomplete="off"
           @keyup.enter="saveCollection"
         />
         <label for="selectLabelGqlEdit">
diff --git a/components/collections/graphql/EditFolder.vue b/components/collections/graphql/EditFolder.vue
index 4f1284d20..1cd14510a 100644
--- a/components/collections/graphql/EditFolder.vue
+++ b/components/collections/graphql/EditFolder.vue
@@ -13,6 +13,7 @@
           class="input floating-input"
           placeholder=" "
           type="text"
+          autocomplete="off"
           @keyup.enter="editFolder"
         />
         <label for="selectLabelGqlEditFolder">
diff --git a/components/collections/graphql/EditRequest.vue b/components/collections/graphql/EditRequest.vue
index ceb6a4797..7846e27e2 100644
--- a/components/collections/graphql/EditRequest.vue
+++ b/components/collections/graphql/EditRequest.vue
@@ -9,6 +9,7 @@
           class="input floating-input"
           placeholder=" "
           type="text"
+          autocomplete="off"
           @keyup.enter="saveRequest"
         />
         <label for="selectLabelGqlEditReq">
diff --git a/components/collections/graphql/index.vue b/components/collections/graphql/index.vue
index 384b37ee1..6d7dc5074 100644
--- a/components/collections/graphql/index.vue
+++ b/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"
       />
diff --git a/components/collections/index.vue b/components/collections/index.vue
index 90290e708..fa04132dd 100644
--- a/components/collections/index.vue
+++ b/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"
         />
diff --git a/components/environments/Add.vue b/components/environments/Add.vue
index 989709afb..1575b7e8a 100644
--- a/components/environments/Add.vue
+++ b/components/environments/Add.vue
@@ -9,6 +9,7 @@
           class="input floating-input"
           placeholder=" "
           type="text"
+          autocomplete="off"
           @keyup.enter="addNewEnvironment"
         />
         <label for="selectLabelEnvAdd">
diff --git a/components/environments/Edit.vue b/components/environments/Edit.vue
index 9a3fa3333..31bfc0cb4 100644
--- a/components/environments/Edit.vue
+++ b/components/environments/Edit.vue
@@ -10,6 +10,7 @@
             class="input floating-input"
             placeholder=" "
             type="text"
+            autocomplete="off"
             :disabled="editingEnvironmentIndex === 'Global'"
             @keyup.enter="saveEnvironment"
           />
diff --git a/components/firebase/Login.vue b/components/firebase/Login.vue
index 4b6ba1682..1b2fe9925 100644
--- a/components/firebase/Login.vue
+++ b/components/firebase/Login.vue
@@ -35,7 +35,7 @@
             placeholder=" "
             type="email"
             name="email"
-            autocomplete="email"
+            autocomplete="off"
             required
             spellcheck="false"
             autofocus
diff --git a/components/graphql/Request.vue b/components/graphql/Request.vue
index 235fe1cb9..a84a16459 100644
--- a/components/graphql/Request.vue
+++ b/components/graphql/Request.vue
@@ -6,6 +6,7 @@
         v-model="url"
         v-focus
         type="url"
+        autocomplete="off"
         spellcheck="false"
         class="
           bg-primaryLight
diff --git a/components/graphql/Sidebar.vue b/components/graphql/Sidebar.vue
index e0b796011..bfc2c69c2 100644
--- a/components/graphql/Sidebar.vue
+++ b/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"
             />
diff --git a/components/history/index.vue b/components/history/index.vue
index 8403421af..6c29119ff 100644
--- a/components/history/index.vue
+++ b/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')"
       />
diff --git a/components/http/Request.vue b/components/http/Request.vue
index 01a5967a9..d99f78666 100644
--- a/components/http/Request.vue
+++ b/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()"
           />
diff --git a/components/realtime/Mqtt.vue b/components/realtime/Mqtt.vue
index f3e09ba89..5ea113fd3 100644
--- a/components/realtime/Mqtt.vue
+++ b/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"
diff --git a/components/realtime/Socketio.vue b/components/realtime/Socketio.vue
index b8be272a8..87adacc2c 100644
--- a/components/realtime/Socketio.vue
+++ b/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"
               />
diff --git a/components/realtime/Sse.vue b/components/realtime/Sse.vue
index 8cb614712..3d230dc38 100644
--- a/components/realtime/Sse.vue
+++ b/components/realtime/Sse.vue
@@ -9,6 +9,7 @@
               v-model="server"
               v-focus
               type="url"
+              autocomplete="off"
               :class="{ error: !serverValid }"
               class="
                 bg-primaryLight
diff --git a/components/realtime/Websocket.vue b/components/realtime/Websocket.vue
index cc36db7c2..121165902 100644
--- a/components/realtime/Websocket.vue
+++ b/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"
diff --git a/components/smart/AutoComplete.vue b/components/smart/AutoComplete.vue
index df33f8aad..402128a2f 100644
--- a/components/smart/AutoComplete.vue
+++ b/components/smart/AutoComplete.vue
@@ -4,6 +4,7 @@
       ref="acInput"
       v-model="text"
       type="text"
+      autocomplete="off"
       :placeholder="placeholder"
       :spellcheck="spellcheck"
       :autocapitalize="autocapitalize"
diff --git a/components/teams/Add.vue b/components/teams/Add.vue
index d0de68a6e..ef4250007 100644
--- a/components/teams/Add.vue
+++ b/components/teams/Add.vue
@@ -9,6 +9,7 @@
           class="input floating-input"
           placeholder=" "
           type="text"
+          autocomplete="off"
           @keyup.enter="addNewTeam"
         />
         <label for="selectLabelTeamAdd">
diff --git a/components/teams/Edit.vue b/components/teams/Edit.vue
index ad745eebd..7553acf39 100644
--- a/components/teams/Edit.vue
+++ b/components/teams/Edit.vue
@@ -10,6 +10,7 @@
             class="input floating-input"
             placeholder=" "
             type="text"
+            autocomplete="off"
             @keyup.enter="saveTeam"
           />
           <label for="selectLabelTeamEdit">
diff --git a/pages/settings.vue b/pages/settings.vue
index 1f33cb956..a77c9e3a3 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -305,6 +305,7 @@
                   class="input floating-input"
                   placeholder=" "
                   type="url"
+                  autocomplete="off"
                   :disabled="!PROXY_ENABLED"
                 />
                 <label for="url">