openui / openui/open-ui

Making a filterable select with an attribute

Open
#1,491 6 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

select
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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.