Skip to content

[EuiComboBox] Pill traversal and safer deletion interaction #590

@cjcenizal

Description

@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.

Metadata

Metadata

Assignees

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions