diff --git a/src/renderer/App.vue b/src/renderer/App.vue index fb54f93110337..759c91240926e 100644 --- a/src/renderer/App.vue +++ b/src/renderer/App.vue @@ -12,6 +12,7 @@ >

diff --git a/src/renderer/components/ft-prompt/ft-prompt.js b/src/renderer/components/ft-prompt/ft-prompt.js index ce18fad404e72..c112cd786f198 100644 --- a/src/renderer/components/ft-prompt/ft-prompt.js +++ b/src/renderer/components/ft-prompt/ft-prompt.js @@ -40,6 +40,10 @@ export default defineComponent({ theme: { type: String, default: 'base' + }, + inert: { + type: Boolean, + default: false } }, emits: ['click'], @@ -56,14 +60,9 @@ export default defineComponent({ }, mounted: function () { this.lastActiveElement = document.activeElement - this.$nextTick(() => { + nextTick(() => { document.addEventListener('keydown', this.closeEventFunction, true) - document.querySelector('.prompt').addEventListener('keydown', this.arrowKeys, true) - this.promptButtons = Array.from( - document.querySelector('.prompt .promptCard .ft-flex-box').childNodes - ).filter((e) => { - return e.id && e.id.startsWith('prompt') - }) + this.promptButtons = Array.from(this.$refs.promptCard.$el.querySelectorAll('.btn.ripple')) this.focusItem(0) }) }, @@ -115,20 +114,25 @@ export default defineComponent({ }, // close on escape key and unfocus closeEventFunction: function(event) { - if (event.type === 'keydown' && event.key === 'Escape') { + if (event.type === 'keydown' && event.key === 'Escape' && !this.inert) { event.preventDefault() this.hide() } }, arrowKeys: function(e) { - if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') { - e.preventDefault() - const currentIndex = this.promptButtons.findIndex((cur) => { - return cur === e.target - }) - const direction = (e.key === 'ArrowLeft') ? -1 : 1 - this.focusItem(parseInt(currentIndex) + direction) + const currentIndex = this.promptButtons.findIndex((cur) => { + return cur === e.target + }) + + // Only react if a button was focused when the arrow key was pressed + if (currentIndex === -1) { + return } + + e.preventDefault() + + const direction = (e.key === 'ArrowLeft') ? -1 : 1 + this.focusItem(parseInt(currentIndex) + direction) }, ...mapActions([ diff --git a/src/renderer/components/ft-prompt/ft-prompt.vue b/src/renderer/components/ft-prompt/ft-prompt.vue index 1332324ca7068..289fb00445989 100644 --- a/src/renderer/components/ft-prompt/ft-prompt.vue +++ b/src/renderer/components/ft-prompt/ft-prompt.vue @@ -4,10 +4,13 @@ ref="openPrompt" class="prompt" tabindex="-1" + :inert="inert" @click="handleHide" @keydown.enter="handleHide" + @keydown.left.right.capture="arrowKeys" >