Fix arrow keys not working in the Create New Playlist prompt

[absidue]

Fix arrow keys not working in the Create New Playlist prompt

Pull Request Type

• Bugfix

Related issue

closes #5232

Description

This pull request addresses two issues with using the arrow keys in the Create New Playlist prompt, firstly that you weren't able to move the cursor around in the text box and secondly that you weren't able to move the focus between the create and cancel buttons.
The first issue was solved by making sure we only detect arrow keys for navigating between the buttons, when the focus is actually on a button.
The second issue was solved by changing how the prompt decides which buttons are eligible for the arrow key treatment, previously it only detected the buttons if they were direct descendents of an ft-flex-box and had an id that started with prompt, now it will detect all ft-buttons inside of the prompt.

Testing

Text box

1. Enter some text into the text box
2. Try moving the cursor with the left and right arrow keys

Buttons

1. Focus the create or cancel buttons by pressing Tab
2. Try moving the focus between the two buttons by using the left and right arrow keys

Desktop

• OS: Windows
• OS Version: 10
• FreeTube version: bf3304d

[efb4f5ff-1298-471a-8973-3d47447115dc]

Arrow keys not working on create or cancel buttons on the 2nd add to playlist prompt showing in the vid. There is also an error thats popping up.

VirtualBoxVM_YOwuYAcf80.mp4

[absidue]

Fixed it, I had to tell the portal that multiple prompts are allowed to get teleported there at the same time, without that extra attribute it broke the rendering of the second prompt.

[efb4f5ff-1298-471a-8973-3d47447115dc]

PR reintroduces behavior that was addressed before by @jasonhenriquez in a previous PR. I can now use tab to go outside the add to playlist prompt

before:

FreeTube_IKvAY2alUs.mp4

This PR:

VirtualBoxVM_uYeomZv3vU.mp4

[absidue]

None of FreeTube's code was written to deal with more than one prompt being open at the same time, as that only happens in that one place in the app and only since playlists were added. So all the bugs you are noticing are caused by that.

This pull request didn't actually break Jason's changes, as it never disabled interaction on the prompt in the background. It was just a lucky side-effect of the broken rendering (yes broken, it made the prompt component forget that it was connected to it's HTML elements), that was caused by trying to teleport two items to a portal only meant to receive one item.

[efb4f5ff-1298-471a-8973-3d47447115dc]

If I look at the before recording I see that the Add to playlist prompt is removed when entering the Create new playlist prompt and that makes me believe that its the reason for being unable to navigate outside the Create new playlist prompt

Edit: re-read your comment. So you're saying that this behavior im describing was a lucky side-effect?

[efb4f5ff-1298-471a-8973-3d47447115dc]

@jasonhenriquez do you have suggestions on solving this issue?

[kommunarr]

You can either make the other prompt inert when the new prompt is opened, or have it such that it's one prompt replacing its content rather than having two open. The first option seems far easier