optgroup are always displayed last

[gmisiolek-sbm]

Describe the bug I have select with options and optgroups mixed together, which is displayed as I want as normal select, but when I want to use choices.js it puts all options first, then all groups below, ignoring order of options/optgroups.

To Reproduce Steps to reproduce the behavior:

1. Add HTML:

   <select class="form-input" name="field_100">
   <option value="" selected="">select</option>
   <option>1</option>
   <option>2</option>
   <option>3</option>
   <optgroup label="4">
   <option>4.1</option>
   <option>4.2</option>
   </optgroup>
   <option>5</option>
   </select>

2. Run choices on this element
3. See invalid order

Expected behavior Options and optgroups should be displayed in order I've specified in html

Screenshots Normal select without choices applied: Select with choices applied:

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context Add any other context about the problem here.

[Xon]

This is currently a limitation of the choices optgroup rendering code. It used to just drop options without an optgroup which is frankly worse.

The work-around would be to use a dummy optgroup to wrap the choices to force ordering.

I'm looking to improve this behavior but it will require some additional structural changes in the back-end but I wanted to finish v11.0.0 and the inevitable followup bugfixes.