Change definition of select element list box and drop-down box rendering

[josepharhar]

Specification title

Change definition of select element list box and drop-down box rendering

Specification or proposal URL (if available)

whatwg/html#11460

Explainer URL (if available)

No response

Proposal author(s)

@josepharhar

MDN URL

No response

Caniuse.com URL

No response

Bugzilla URL

No response

Mozillians who can provide input

No response

WebKit standards-position

WebKit/standards-positions#532

Other information

This changes how the size and multiple attribute are used to choose between creating an in-page listbox or a drop-down popup select element across platforms so that mobile platforms can have an in-page listbox select and desktop can have a drop-down multi-select.

[josepharhar]

@emilio do you have any opinions on this?

[emilio]

@josepharhar can you double-check my understanding of the changes? IIUC this needs:

• Change mobile browsers to honor <select multiple> like desktop. and
• Change desktop browsers to support <select multiple size=1> as a dropdown with multiple selectable options (think a checkbox menu or so). This would get the current mobile behavior.

Is that right? If so, I think that seems reasonable.

Main concern is that the later is technically a new feature in desktop, and it'd be good to make sure that we get the details right. Is the <select multiple size=1> dropdown well defined with customizable select and so on? Also the mixing with <optgroup> might look a bit funky, but maybe fine, not sure what mobile does there r/n.

On Firefox's end I think the most sensible way I'd implement it would making the menuitems display a checkbox / checkmark, and not auto-hiding the popup when clicking on it, not sure if that's what you had in mind? I think those details should probably be written down somewhere...

cc @zcorpan @jcsteh @smaug---- @keithamus

[josepharhar]

Thanks Emilio!

Is that right? If so, I think that seems reasonable.

Yes, that's right

Is the <select multiple size=1> dropdown well defined with customizable select and so on?

If you're asking about base appearance for this mode, there is an open question about ok/cancel buttons, but otherwise base appearance for this mode is straightforward: openui/open-ui#1217

Does this answer your question?

Also the mixing with <optgroup> might look a bit funky, but maybe fine, not sure what mobile does there r/n.

Optgroups and the options within them render as expected to me on mobile and the new desktop UI. I've attached a screenshot at the bottom of this comment.

On Firefox's end I think the most sensible way I'd implement it would making the menuitems display a checkbox / checkmark, and not auto-hiding the popup when clicking on it, not sure if that's what you had in mind? I think those details should probably be written down somewhere...

In chromium, I've implemented this by reusing the customizable select popover and rendering everything in-document instead of using the popup document that we currently use for windows/linux single-selects. As you mentioned, it doesn't hide the popup when clicking on an option. It also has some non-standard styles since it's appearance:auto, like a chromium-looking checkbox next to the options.

[emilio]

Yeah, that answers my questions, I think it is reasonable, thanks Joey!