Automatically open option list in a <select> (HTMLSelectElement)

[ashmind]

Problem

I am working on examples for some UIs that are using <select> (using Storybook).

At least a few examples are intended to demonstrate how the <select> options are grouped and ordered. Those examples would benefit from a <select> being open straight away when user opens the example (since the point is to demonstrate the options).

However it seems there is no way to open a standard HTML <select> programmatically. Of course I can use a non-standard select, and that seems to be the main workaround the community is using, but I think longer-term default select should provide something.

Summary / TLDR

It would be good to have some way to open HTML <select> programmatically (either JS-only or HTML/JS).

Community Interest

• StackOverflow: How can you programmatically tell an HTML SELECT to drop down (for example, due to mouseover)?
  134 upvotes, 20 stars, top answer has 128 upvotes
• StackOverflow: Is it possible to use JS to open an HTML select to show its option list?
  143 upvotes, 9 stars
• and many more duplicates of the above

Related Discussions

• Add open state to <select> #5792 might be related, but seems significantly wider in scope
• Introduce "open" DOM property for <select> element #2072 is similar but read only
• WICG Discourse: HTMLSelectElement add ability to show option list programmatically

[annevk]

It seems that "Future work" of #7319 has arrived. 😊

cc @whatwg/forms

[lukewarlow]

Is there anything major blocking this or would I be able to file a spec PR that adds this? OpenUI have discussed and agreed to add this function for the new <selectlist> proposal so it feels like a natural next step to add it to <select> itself?