Query Filter: After opening a query-filter you should be able to type a letter and jump to an item in that list.

[StevenDufresne]

With HTML <select> component, you can open the select and type a letter which will move the focus down to the first matching item. This is useful for long list, most commonly a list of countries.

Acceptance Criteria

Given the following QueryFilter dropdown with the following items:

[ "a", "b", "c", "d", "e", "h", "r", "s","u"]

1. I open the dropdown
2. I type r, my focus should move down to r

[iandunn]

I think it'd even more useful if it was a search. We could use the ComboControlbox component to add that. See https://core.trac.wordpress.org/ticket/19867#comment:87

[StevenDufresne]

I think it'd even more useful if it was a search. We could use the ComboControlbox component to add that. See https://core.trac.wordpress.org/ticket/19867#comment:87

I still think it's relevant, but for that case, the filtering would be nice. 👍

[iandunn]

Do you mean that the focusing is still relevant? I think that'd happen as a byproduct of the list being filtered, wouldn't it?

https://wordpress.github.io/gutenberg/?path=/docs/components-comboboxcontrol--docs

Now that I look closer, though, query-filter is rendered in PHP, and ComboBox is a component rather than a block, so maybe it isn't a great solution after all. We'd have to enqueue React on the front end, which could be a performance issue.

query-filter is already using the Interactivity API, so we could maybe build our own search with that, but that sounds like it could be a rabbit hole compared to using something that's already been built.

We could use selectWoo, or maybe the latest version of Select2. IIRC it's fixed a lot of the a11y isues that caused selectWoo to fork it. I'm guessing we'd need to change the markup quite a bit, though, and it might conflict w/ the Interactivity API 🤔

[ryelle]

We could always go back to a native select element 🧌

When building query-filter, I expected we would iterate on it to add these sorts of interactions. I think we would have a hard time with something like select2 given how much design control we need (not that it can't be styled, but we'd have to start back at zero).

With HTML <select> component, you can open the select and type a letter which will move the focus down to the first matching item. This is useful for long list, most commonly a list of countries.

I think we could do this with the interactivity API, watch for keypresses while the dropdown is open, and move the focus to the first matching element. It's not a search/filtering items, just moving focus. The trick would be matching native behavior (eg, when you type multiple characters, when nothing is found, etc).