Fix arrow keys not working in the Create New Playlist prompt (#5243)

* Fix arrow keys not working in the Create New Playlist prompt * Allow multiple prompts to be open at the same time * Make add video prompt inert when create playlist one is open too
FreeTubeApp · Jun 19, 2024 · 877a644 · 877a644
1 parent ff016c9
commit 877a644
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 16 deletions.
diff --git a/src/renderer/App.vue b/src/renderer/App.vue
@@ -12,6 +12,7 @@
   >
     <portal-target
       name="promptPortal"
+      multiple
       @change="handlePromptPortalUpdate"
     />
     <ft-prompt

diff --git a/src/renderer/components/ft-playlist-add-video-prompt/ft-playlist-add-video-prompt.vue b/src/renderer/components/ft-playlist-add-video-prompt/ft-playlist-add-video-prompt.vue
@@ -2,6 +2,7 @@
   <ft-prompt
     theme="flex-column"
     :label="title"
+    :inert="showingCreatePlaylistPrompt"
     @click="hide"
   >
     <h2 class="heading">

diff --git 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
@@ -4,10 +4,13 @@
       ref="openPrompt"
       class="prompt"
       tabindex="-1"
+      :inert="inert"
       @click="handleHide"
       @keydown.enter="handleHide"
+      @keydown.left.right.capture="arrowKeys"
     >
       <ft-card
+        ref="promptCard"
         class="promptCard"
         :class="{ autosize, [theme]: true }"
         role="dialog"
@@ -33,7 +36,6 @@
           <ft-flex-box>
             <ft-button
               v-for="(option, index) in optionNames"
-              :id="'prompt-' + sanitizedLabel + '-' + index"
               :key="index"
               :label="option"
               :text-color="optionButtonTextColor(index)"