Mobile and desktop parity for the select element

[josepharhar]

MDN URL

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/select

What specific section or headline is this issue about?

multiple and size attributes

What information was incorrect, unhelpful, or incomplete?

The HTML spec is changing and chrome has already shipped what I called "mobile desktop parity" for the select element, meaning that the select element will now render as a drop-down box or a listbox consistently across mobile and desktop platforms given the same combination of multiple and size attributes. Prior to this change, desktop showed either a listbox or a drop-down box but didn't support a drop-down box for <select multiple>, and mobile didn't support a listbox in any configuration.

Here is a table which explains the new behavior:

HTML	rendering mode
<select>	drop-down box
<select size=4> (any size > 1)	listbox
<select multiple>	listbox
<select muiltiple size=1>	drop-down box

The spec was written such that <select multiple size=1> might still be a listbox on certain platforms because macos appkit doesn't have a native picker for this, so it is likely that safari will still make this a listbox on macos. Chrome makes this a drop-down box on all platforms.

What did you expect to see?

Documentation about <select multiple size=1> at least, which is sort of a new thing we created. I think the table about rendering modes would also be helpful to show to authors.

Do you have any supporting links, references, or citations?

• Change definition of select element list box and drop-down box rendering whatwg/html#11460
• https://chromestatus.com/feature/5412736871825408

Do you have anything more you want to share?

@chrisdavidmills

[mohammed-ali-osman]

HTML	rendering mode
<select>	drop-down box
<select size=4> (any size > 1)	listbox
<select multiple>	listbox
<select muiltiple size=1>	drop-down box

Hi! I'd like to help update this documentation.

Would it make sense to add a small subsection under the size attribute (in the Attributes section) describing the rendering behavior when multiple and size are combined, including the <select multiple size="1"> case?

I was thinking of adding a short table explaining the typical rendering (drop-down vs listbox).
If that sounds good, I'd be happy to open a PR for it.

Let me know if this approach works or if you'd prefer it documented somewhere else.

[chrisdavidmills]

Thanks for filing, @josepharhar. Some questions for clarification:

• When you say "but didn't support a drop-down box for <select multiple>", are you specifically talking about when using <select multiple size=1> to create a drop-down? <select multiple> would create a listbox.
• This work is separate from customizable selects, right? I've just read the ChromeStatus entry, and it looks like it is saying this is a precursor to get the default story consistent before you start implementing customizable <select multiple size=1>? I just thought I'd check.
• What is the cross-browser story like for this change? We need to be careful to represent the whole story, not just the chrome story. I'd suggest adding a BCD entry for this change, and having some kind of separate section on the <select> page to discuss the full story of the rendering of dropdowns versus listboxes, which the size and multiple attribute definitions can link to. There are a few details on the page already, but they are fragmented.
• Is it fair to say that, really, this change is mostly about getting <select multiple size=1> to render a dropdown consistently across browsers? This will affect the BCD and the tone of the new section.

Thanks for showing an interest in helping with this issue, @mohammed-ali-osman. This could be a bit trickier than you might first think, hence my gathering some more details with my questions above. Let's see what @josepharhar says.

[mohammed-ali-osman]

Thanks! Happy to help — I’ll follow along and provide input where I can. Looking forward to hearing what @josepharhar says.

[josepharhar]

When you say "but didn't support a drop-down box for <select multiple>", are you specifically talking about when using <select multiple size=1> to create a drop-down? <select multiple> would create a listbox.

Yes, I am specifically talking about <select multiple size=1>, I should have been more specific.

This work is separate from customizable selects, right? I've just read the ChromeStatus entry, and it looks like it is saying this is a precursor to get the default story consistent before you start implementing customizable <select multiple size=1>? I just thought I'd check.

<select multiple size=1> was part of it, but the main motivation for me was for launching customizable select listboxes on mobile, since before this it wasn't possible to get a listbox on mobile.

What is the cross-browser story like for this change? We need to be careful to represent the whole story, not just the chrome story. I'd suggest adding a BCD entry for this change, and having some kind of separate section on the <select> page to discuss the full story of the rendering of dropdowns versus listboxes, which the size and multiple attribute definitions can link to. There are a few details on the page already, but they are fragmented.

The other browsers haven't implemented this yet, at least I don't think they have. How do I add a BCD entry?

This also makes me realize that I should add the nuance about the macos safari thing to the table based on what we have agreed and discussed so far. Here is a better one:

HTML	appearance	rendering mode
<select>	auto or base	drop-down box
<select size=4>	auto or base	listbox
<select multiple>	auto or base	listbox
<select multiple size=1>	base	drop-down box
<select multiple size=1>	auto	listbox on MacOS safari, drop-down box on other platforms and browsers

Is it fair to say that, really, this change is mostly about getting <select multiple size=1> to render a dropdown consistently across browsers? This will affect the BCD and the tone of the new section.

<select multiple size=1> will consistently be a dropdown across browsers if appearance:base-select is used, but not if appearance:auto is used due to the MacOS safari issue.

To me, it is mostly about getting listboxes on mobile.