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.