Making a filterable select with an attribute
Nobody has claimed this yet.
- Dominant language
- MDX
- Stars
- 4.5k
- Forks
- 226
- Avg merge
- 2d 22h
- Merged PRs (30d)
- 4
Description
Nesting <input> in <select> has a bunch of issues, most notably the HTML parser changes and lack of graceful degredation.
The sibling <input> and <select size=4> solution also has issues:
- Choosing an option in a single select doesn't automatically close the author's picker/dialog/popover.
- Typeahead doesn't work on the button that opens the picker.
- We can't (at least not easily) automatically set the role of the picker to a dialog or set the role of the button that opens the picker to a combobox (if thats the role we end up choosing).
- Author has to write a lot more code, and there's more things to get wrong.
It was pointed out in an aria discussion that putting an attribute on the select element to opt into filtering could be a good path forward, or should at least be mentioned as an alternative in the explainer.
I didn't like this option in the past because without a real javascript handle to the input element, it would limit capabilities. Since its been so long without much progress on the other two options, I want to consider this again and really enumerate all of the things we might need to add to the IDL of the select element to make this work well. What do yall think we would need to add?
- input.value
- Maybe a beforefilter event on the select element could be good enough to replace other events on the input element? And they would still bubble ot the select element?
- input selection api?
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reading this issue and the linked WHATWG HTML discussion. Enumerate the select IDL, filtering, event, selection, and accessibility behavior required for an attribute-based solution; done means a settled proposal that explains the needed API and addresses the listed limitations.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- html
- Domain
- accessibility, frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Quiet
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100