cc-kv-explorer: fix strange behavior when using arrow keys and tab in keys list

[pdesoyres-cc]

The combination of lit-virtualizer and a radio inputs doesn't really work when playing with arrow keys.

[pdesoyres-cc]

If you focus the left menu and tabulate when you'll be on the "delete" buttons, you're not able to use the arrow keys to move around and select another key, it will just scroll. You'll need to go back to the one that you selected to do that with the keyboard. I don't know if it's intended or not but it's kinda weird

When focusing the button inside an option, the browser doesn't consider that it should play the behavior.

pdesoyres-cc commented 1 week ago

When you tab and focus after the list and you tabulate back to the list of keys, it will scroll and put the focus on a key which is not the last one.

It will focus the last focusable item in the list which is the last one in the DOM. THe last one in the DOM is not the real last one because of the <lit-virtualizer>

pdesoyres-cc commented 1 week ago

While navigating with keyboard, in the keys list, if I use the up arrow when I'm on the first key, the focus is set in the middle of the list on a random string, I found it weird.

This is weird you're right! Here is what is going on: When hitting the arrow up, the underlying <select> behavior is to select its last option. When we are in a <lit-virtualizer>, not all options are in the DOM at the time you hit the arrow up key. The <lit-virtualizer> limits the nuymber of items in the DOM: a little bit more than the visible items. So, when the select tries to focus the last option, it focuses the last options that it has got in the DOM, which not the real last one.

• © Githubissues.
• Githubissues is a development platform for aggregating issues.

[pdesoyres-cc]

When you tab and focus after the list and you tabulate back to the list of keys, it will scroll and put the focus on a key which is not the last one.

It will focus the last focusable item in the list which is the last one in the DOM. THe last one in the DOM is not the real last one because of the <lit-virtualizer>

[pdesoyres-cc]

While navigating with keyboard, in the keys list, if I use the up arrow when I'm on the first key, the focus is set in the middle of the list on a random string, I found it weird.

This is weird you're right! Here is what is going on: When hitting the arrow up, the underlying <select> behavior is to select its last option. When we are in a <lit-virtualizer>, not all options are in the DOM at the time you hit the arrow up key. The <lit-virtualizer> limits the nuymber of items in the DOM: a little bit more than the visible items. So, when the select tries to focus the last option, it focuses the last options that it has got in the DOM, which not the real last one.