3 ms·

TFA mentions `optgroup` too, wouldn't it make more sense to use that and style it similarly? Especially if `hr`-in-`select` is only going to work in Safari anyw

by OJFord 3y ago

TFA mentions `optgroup` too, wouldn't it make more sense to use that and style it similarly? Especially if `hr`-in-`select` is only going to work in Safari anyway(?).

chrisb 3y ago
The article isn't completely clear; but hr-in-select is standardized [0] - and it definitely works in the Firefox v122.0 I'm browsing with. [0] https://html.spec.whatwg.org/multipage/form-elements.html#the-select-element https://html.spec.whatwg.org/multipage/form-elements.html#th... (see the "Content model" line)
- OJFord 3y ago
  Pfft I'm an idiot - I'm reading from (and tried it out with) Firefox too!
  - genezeta 3y ago
    It's been added in 122.0 [0], but it wasn't working previously. [0] https://www.mozilla.org/en-US/firefox/122.0/releasenotes/#note-789971 https://www.mozilla.org/en-US/firefox/122.0/releasenotes/#no...
    - OJFord 3y ago
      I'm using latest FF, it did work, I said I was an idiot because despite seeing it work, trying it out in a non-Safari browser, I came here and wondered aloud if it would work other than in Safari!
- deleted 3y ago
  [deleted]
lapcat 3y ago
Optgroup has a mandatory label attribute.
vinnymac 3y ago
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.
shiomiru 3y ago
Agreed, this just looks like a non-accessible <optgroup> alternative and feels like a step backwards. I fear authors will now use hr instead of properly grouping their elements, to the detriment of screen reader users. Why not just make horizontal rules between optgroups the default?

by OJFord 3y ago

TFA mentions `optgroup` too, wouldn't it make more sense to use that and style it similarly? Especially if `hr`-in-`select` is only going to work in Safari anyway(?).

chrisb 3y ago

The article isn't completely clear; but hr-in-select is standardized [0] - and it definitely works in the Firefox v122.0 I'm browsing with. [0] https://html.spec.whatwg.org/multipage/form-elements.html#the-select-element https://html.spec.whatwg.org/multipage/form-elements.html#th... (see the "Content model" line)

OJFord 3y ago
Pfft I'm an idiot - I'm reading from (and tried it out with) Firefox too!
- genezeta 3y ago
  It's been added in 122.0 [0], but it wasn't working previously. [0] https://www.mozilla.org/en-US/firefox/122.0/releasenotes/#note-789971 https://www.mozilla.org/en-US/firefox/122.0/releasenotes/#no...
  - OJFord 3y ago
    I'm using latest FF, it did work, I said I was an idiot because despite seeing it work, trying it out in a non-Safari browser, I came here and wondered aloud if it would work other than in Safari!
deleted 3y ago
[deleted]

lapcat 3y ago

Optgroup has a mandatory label attribute.

vinnymac 3y ago

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.

shiomiru 3y ago

Agreed, this just looks like a non-accessible <optgroup> alternative and feels like a step backwards. I fear authors will now use hr instead of properly grouping their elements, to the detriment of screen reader users. Why not just make horizontal rules between optgroups the default?