optgroup does not work when some options are nested and some are not

[EvanLovely]

The library used works if every <option> is in a <optgroup> but has a bug when some are nested and some are not.

This will work:

  <select>
    <optgroup label="UK">
      <option value="London">London</option>
      <option value="Manchester">Manchester</option>
    </optgroup>
    <optgroup label="FR">
      <option value="Paris">Paris</option>
      <option value="Marseille">Marseille</option>
    </optgroup>
  </select>

This will not:

  <select>
    <option value="NYC">New York</option>
    <optgroup label="UK">
      <option value="London">London</option>
      <option value="Manchester">Manchester</option>
    </optgroup>
    <optgroup label="FR">
      <option value="Paris">Paris</option>
      <option value="Marseille">Marseille</option>
    </optgroup>
  </select>

Related: #253

[Geolim4]

Hello @mtriff, can you take a look at this bug eventually please ? 😭

[voidus]

I have started to look into this, but didn't get very far yet. I do have a failing cypress test though, if anyone wants to support: https://github.com/voidus/Choices/tree/fix-mixed-optgroups

Next step: Find the relevant place in the code

[voidus]

Okay I've oriented myself a bit in the code and found an approach.

Right now, afaict, the parts that process the options deal with either Choice objects or the html options, and my approach is to convert the html elements to Choice objects first. This should enable us to simplify the processing code.

TBH, I was expecting the change on the branch to already have an effect, but it doesn't look like it.
If anybody wants to continue, please don't hesitate to grab the code!

@mtriff would you be generally open to merge something like this? Otherwise we should probably discuss potential approaches. (Tagging you because you seem to be maintaining the repo)

[voidus]

Yeah folks I think I got it. 🕺
Let's see if this is taking the code in a direction that @mtriff is happy with :)