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"
>