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 @@ @@ -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() + }) + } + }, }, } 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 @@
@@ -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" /> @@ -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" />