[EuiComboBox] Pill traversal and safer deletion interaction

[cjcenizal]

Per #567 (comment):

I think the "pill" should be tabable. And that you should have to tab through them to get to the input. Right now it's pretty hard to get to them with your keyboard. There's no way to delete the first item of three with the keyboard. You have to delete all or nothing.

Similarly, for your backspace mechanic, I'd suggest using the first Backspace to do a "shift-tab" action, that actually selects the item, then the second backspace actually deletes it. This prevents people from inadvertently deleting things by accident. It's a small thing, but really helps these kinds of interactions. Here's an example of one I built awhile ago. The "blue" state is the first backspace, and then the second backspace confirms it. If you end up added something like that, i can think up some proper styling if you pass over an isSelected prop on the pill itself.

[anishagg17]

Also, hitting delete key doesn't delete the currently focused element

[chandlerprall]

Tabbing through pills is now supported. However, the rest of the reported issue is still valid - plus now if you tab to a pill and hit backspace it removes the last pill not the one selected 😢 (see the previous comment, which has a screen grab of this in action). Hitting space will remove the highlighted pill.

[github-actions]

👋 Hey there. This issue hasn't had any activity for 180 days. We'll automatically close it if that trend continues for another week. If you feel this issue is still valid and needs attention please let us know with a comment.