3 ms·

Not to mention the user experience for an optgroup on mobile is vastly superior as a sheet rather than a popover. https://developer.mozilla.org/en-US/docs/Web/

Not to mention the user experience for an optgroup on mobile is vastly superior as a sheet rather than a popover. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select https://developer.mozilla.org/en-US/docs/Web/HTML/Element/se... For those without iOS, see an example here: https://ibb.co/DkN16Gc https://ibb.co/DkN16Gc

Pesthuf 3y ago
<select multiple> on mobile devices is so good - why don't the finally improve the implementations on the desktop as well? The arcane 90s UI paradigm it currently uses everywhere just doesn't work. And please, just give us an attribute that adds a search bar... I don't want to use 30 KB of JavaScript just to have selects that feel like they're from this millennium, especially since those then don't work too well on mobile…
- extra88 3y ago
  That's a text input plus a datalist. Their browser implementations also have some issues but can do the job.
  - moron4hire 3y ago
    There's a whole other ball of problem wax with input plus datalist. The options don't appear again if one has been selected already; the user first has to clear the input and then the list appears. Also, the input can't be strictly limited to the options in the datalist; the user could type in whatever they want and it's still "valid" and fulfills any required attribute added to the tag.
- carlosjobim 3y ago
  > And please, just give us an attribute that adds a search bar... That's the datalist html element.
- int_19h 3y ago
  What is "arcane" about the desktop multiple selection paradigm? It has been the standard way to deal with selections in all desktop OSes for decades now.
  - cxr 3y ago
    See bdcravens's response: <https://news.ycombinator.com/item?id=39158003 https://news.ycombinator.com/item?id=39158003> (Note though that you aren't limited to Ctrl-clicking. There's Shift-clicking, too, as well as mouse lassoing. Assuming your UA supports it, that is.)
crazygringo 3y ago
Funny, it looks way better on mobile than it does on desktop [1]. On desktop (Chrome on Mac) each optgroup label is just a disabled item, and then its options are indented menu items below it. It looks totally hacky -- the name of a group shouldn't seem like "disabled" option, nor are indentations in menu items an established convention. That sheet on iOS is perfectly intuitive, however. [1] Link to page section with demo: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#select_with_grouping_options https://developer.mozilla.org/en-US/docs/Web/HTML/Element/se...
- int_19h 3y ago
  Firefox renders group titles using bold italic font while indenting the items under it, so it looks like a header.

Pesthuf 3y ago

<select multiple> on mobile devices is so good - why don't the finally improve the implementations on the desktop as well? The arcane 90s UI paradigm it currently uses everywhere just doesn't work. And please, just give us an attribute that adds a search bar... I don't want to use 30 KB of JavaScript just to have selects that feel like they're from this millennium, especially since those then don't work too well on mobile…

extra88 3y ago
That's a text input plus a datalist. Their browser implementations also have some issues but can do the job.
- moron4hire 3y ago
  There's a whole other ball of problem wax with input plus datalist. The options don't appear again if one has been selected already; the user first has to clear the input and then the list appears. Also, the input can't be strictly limited to the options in the datalist; the user could type in whatever they want and it's still "valid" and fulfills any required attribute added to the tag.
carlosjobim 3y ago
> And please, just give us an attribute that adds a search bar... That's the datalist html element.
int_19h 3y ago
What is "arcane" about the desktop multiple selection paradigm? It has been the standard way to deal with selections in all desktop OSes for decades now.
- cxr 3y ago
  See bdcravens's response: <https://news.ycombinator.com/item?id=39158003 https://news.ycombinator.com/item?id=39158003> (Note though that you aren't limited to Ctrl-clicking. There's Shift-clicking, too, as well as mouse lassoing. Assuming your UA supports it, that is.)

crazygringo 3y ago

Funny, it looks way better on mobile than it does on desktop [1]. On desktop (Chrome on Mac) each optgroup label is just a disabled item, and then its options are indented menu items below it. It looks totally hacky -- the name of a group shouldn't seem like "disabled" option, nor are indentations in menu items an established convention. That sheet on iOS is perfectly intuitive, however. [1] Link to page section with demo: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#select_with_grouping_options https://developer.mozilla.org/en-US/docs/Web/HTML/Element/se...

int_19h 3y ago
Firefox renders group titles using bold italic font while indenting the items under it, so it looks like a header.