Custom properties doesn't work with optgroup

[cedbesafilm]

Describe the bug
When the user click on an option inside an optgroup tag, the data-custom-properties attribute is ignored and the customProperties is set to null

To Reproduce
HTML without optgroup

<select id="um1" class="gybesa-select ricercaOn   mt-2">
  <option placeholder value="">----------</option>
  <option value="m" data-custom-properties="m<split>metri<split>Y<split>lunghezza">metri</option>
  <option value="dm" data-custom-properties="dm<split>decimetri<split>Y<split>lunghezza">decimetri</option>
  <option value="cm" data-custom-properties="cm<split>centimetri<split>Y<split>lunghezza">centimetri</option>
  <option value="mm" data-custom-properties="mm<split>millimetri<split>Y<split>lunghezza">millimetri</option>
  <option value="µm" data-custom-properties="µm<split>micron<split>Y<split>lunghezza">micron</option>
  <option value="kg" data-custom-properties="kg<split>chilogrammo<split>Y<split>peso">chilogrammo</option>
  <option value="hg" data-custom-properties="hg<split>ettogrammo<split>Y<split>peso">ettogrammo</option>
  <option value="dag" data-custom-properties="dag<split>decagrammo<split>Y<split>peso">decagrammo</option>
  <option value="g" data-custom-properties="g<split>grammo<split>Y<split>peso">grammo</option>
  <option value="nr" data-custom-properties="nr<split>numero<split>Y<split>quantita">numero</option>
  <option value="pz" data-custom-properties="pz<split>pezzi<split>Y<split>quantita">pezzi</option>
  <option value="ban" data-custom-properties="ban<split>bancali<split>Y<split>quantita">bancali</option>
  <option value="bob" data-custom-properties="bob<split>bobine<split>Y<split>quantita">bobine</option>
</select>

when i select an option i can retrieve customProperties

if i enable optgroup

<select id="um1" class="gybesa-select ricercaOn   mt-2">
  <option placeholder value="">----------</option>
  <optgroup label="lunghezza">
    <option value="m" data-custom-properties="m<split>metri<split>Y<split>lunghezza">metri</option>
    <option value="dm" data-custom-properties="dm<split>decimetri<split>Y<split>lunghezza">decimetri</option>
   <option value="cm" data-custom-properties="cm<split>centimetri<split>Y<split>lunghezza">centimetri</option>
    <option value="mm" data-custom-properties="mm<split>millimetri<split>Y<split>lunghezza">millimetri</option>
    <option value="µm" data-custom-properties="µm<split>micron<split>Y<split>lunghezza">micron</option>
  </optgroup>
  <optgroup label="peso">
    <option value="kg" data-custom-properties="kg<split>chilogrammo<split>Y<split>peso">chilogrammo</option>
    <option value="hg" data-custom-properties="hg<split>ettogrammo<split>Y<split>peso">ettogrammo</option>
    <option value="dag" data-custom-properties="dag<split>decagrammo<split>Y<split>peso">decagrammo</option>
    <option value="g" data-custom-properties="g<split>grammo<split>Y<split>peso">grammo</option>
    </optgroup>
  <optgroup label="quantita">
    <option value="nr" data-custom-properties="nr<split>numero<split>Y<split>quantita">numero</option>
    <option value="pz" data-custom-properties="pz<split>pezzi<split>Y<split>quantita">pezzi</option>
    <option value="ban" data-custom-properties="ban<split>bancali<split>Y<split>quantita">bancali</option>
    <option value="bob" data-custom-properties="bob<split>bobine<split>Y<split>quantita">bobine</option>
  </optgroup>
</select>

when i select an option i can't retrieve customProperties

I have try to add another optgroup for the placeholder option but with no luck

Expected behavior
Even with optgroup retrieve data-custom-properties attribute

[kroehre]

@cedbesafilm did you find a solution? I think I'm encountering this issue as well.

[cedbesafilm]

@kroehre
I hadn't found a solution. But since I used optgroup for an aesthetic factor I directly eliminated optgroup to simplify the code

[marcus-at-localhost]

A fix exists: #543

[marcus-at-localhost]

optgroup could be replaced by <option disabled>%s</option> to have a visual separation. It's not as nice though....