Fix mixed optgroups

cypress/e2e/select-multiple.spec.ts

@@ -702,6 +702,19 @@ describe('Choices - select multiple', () => {
       });
     });
 
+    describe('some options with a group and some without', () => {
+      it('Shows all options, whether they are in a group or not', () => {
+        cy.get('[data-test-hook=mixed-groups]')
+          .find('.choices__input--cloned')
+          .focus();
+        cy.get('[data-test-hook=mixed-groups]')
+          .find('.choices__list--dropdown .choices__item')
+          .should(($choices) => {
+            expect($choices.length).to.equal(3);
+          });
+      });
+    });
+
     describe('custom properties', () => {
       beforeEach(() => {
         cy.get('[data-test-hook=custom-properties]')

package.json

@@ -11,9 +11,9 @@
     "lint:js": "eslint src/scripts/**/*.ts",
     "lint:scss": "stylelint src/**/*.scss",
     "bundlesize": "bundlesize",
-    "cypress:run": "cypress run --browser chrome",
+    "cypress:run": "cypress run --browser chromium",
     "cypress:open": "cypress open",
-    "cypress:ci": "cypress run --browser chrome --record --group $GITHUB_REF --ci-build-id $GITHUB_SHA",
+    "cypress:ci": "cypress run --browser chromium --record --group $GITHUB_REF --ci-build-id $GITHUB_SHA",
     "test": "run-s test:unit test:e2e",
     "test:unit": "cross-env TS_NODE_TRANSPILE_ONLY=true NODE_ENV=test mocha",
     "test:unit:watch": "npm run test:unit -- --watch --inspect=5556",

public/test/select-multiple/index.html

@@ -283,6 +283,23 @@ <h2>Select multiple inputs</h2>
             </optgroup>
           </select>
         </div>
+        <div data-test-hook="mixed-groups">
+          <label for="choices-groups"
+            >Choice groups with some elements without a group</label
+          >
+          <select
+            class="form-control"
+            name="mixed-choices-groups"
+            id="mixed-choices-groups"
+            multiple
+          >
+            <optgroup label="UK">
+              <option value="London">London</option>
+            </optgroup>
+            <option value="Paris">Paris</option>
+            <option value="Lyon">Lyon</option>
+          </select>
+        </div>
 
         <div data-test-hook="custom-properties">
           <label for="choices-custom-properties">Custom properties</label>
@@ -481,6 +498,10 @@ <h2>Select multiple inputs</h2>
           allowHTML: true,
         });
 
+        new Choices('#mixed-choices-groups', {
+          allowHTML: false,
+        });
+
         new Choices('#choices-custom-properties', {
           allowHTML: true,
           searchFields: ['label', 'value', 'customProperties.country'],

src/scripts/choices.ts

@@ -46,7 +46,6 @@ import {
   isType,
   sortByScore,
   strToEl,
-  parseCustomProperties,
 } from './lib/utils';
 import { defaultState } from './reducers';
 import Store from './store/store';
@@ -283,19 +282,10 @@ class Choices implements Choices {
     }
     // Create array of choices from option elements
     if ((this.passedElement as WrappedSelect).options) {
-      (this.passedElement as WrappedSelect).options.forEach((option) => {
-        this._presetChoices.push({
-          value: option.value,
-          label: option.innerHTML,
-          selected: !!option.selected,
-          disabled: option.disabled || option.parentNode.disabled,
-          placeholder:
-            option.value === '' || option.hasAttribute('placeholder'),
-          customProperties: parseCustomProperties(
-            option.dataset.customProperties,
-          ),
-        });
-      });
+      const choicesFromOptions = (
+        this.passedElement as WrappedSelect
+      ).optionsAsChoices();
+      this._presetChoices.push(...choicesFromOptions);
     }
 
     this._render = this._render.bind(this);
@@ -903,6 +893,13 @@ class Choices implements Choices {
       groups.sort(this.config.sorter);
     }
 
+    // Add Choices without group first, regardless of sort, otherwise they won't be distinguishable
+    // from the last group
+    const choicesWithoutGroup = choices.filter((c) => c.groupId == -1);
+    if (choicesWithoutGroup.length > 0) {
+      this._createChoicesFragment(choicesWithoutGroup, fragment, false);
+    }
+
     groups.forEach((group) => {
       const groupChoices = getGroupChoices(group);
       if (groupChoices.length >= 1) {
@@ -2216,12 +2213,7 @@ class Choices implements Choices {
       this._highlightPosition = 0;
       this._isSearching = false;
       this._startLoading();
-
-      if (this._presetGroups.length) {
-        this._addPredefinedGroups(this._presetGroups);
-      } else {
-        this._addPredefinedChoices(this._presetChoices);
-      }
+      this._addPredefinedChoices(this._presetChoices);
 
       this._stopLoading();
     }

src/scripts/components/wrapped-select.ts

@@ -1,6 +1,10 @@
+import { Choice } from '../interfaces/choice';
+import { parseCustomProperties } from '../lib/utils';
 import { ClassNames } from '../interfaces/class-names';
 import { Item } from '../interfaces/item';
 import WrappedElement from './wrapped-element';
+import { isHTMLOptgroup } from '../lib/htmlElementGuards';
+import { isHTMLOption } from '../lib/htmlElementGuards';
 
 export default class WrappedSelect extends WrappedElement {
   element: HTMLSelectElement;
@@ -53,6 +57,42 @@ export default class WrappedSelect extends WrappedElement {
     this.appendDocFragment(fragment);
   }
 
+  optionsAsChoices(): Partial<Choice>[] {
+    const choices: Partial<Choice>[] = [];
+
+    for (const e of Array.from(this.element.querySelectorAll(':scope > *'))) {
+      if (isHTMLOption(e)) {
+        choices.push(this._optionToChoice(e as HTMLOptionElement));
+      } else if (isHTMLOptgroup(e)) {
+        choices.push(this._optgroupToChoice(e as HTMLOptGroupElement));
+      }
+      // There should only be those two in a <select> and we wouldn't care about others anyways
+    }
+
+    return choices;
+  }
+
+  _optionToChoice(option: HTMLOptionElement): Choice {
+    return {
+      value: option.value,
+      label: option.innerHTML,
+      selected: !!option.selected,
+      disabled: option.disabled || this.element.disabled,
+      placeholder: option.value === '' || option.hasAttribute('placeholder'),
+      customProperties: parseCustomProperties(option.dataset.customProperties),
+    };
+  }
+
+  _optgroupToChoice(optgroup: HTMLOptGroupElement): Partial<Choice> {
+    return {
+      label: optgroup.label || '',
+      disabled: !!optgroup.disabled,
+      choices: Array.from(optgroup.querySelectorAll('option')).map((option) =>
+        this._optionToChoice(option),
+      ),
+    };
+  }
+
   appendDocFragment(fragment: DocumentFragment): void {
     this.element.innerHTML = '';
     this.element.appendChild(fragment);

src/scripts/lib/htmlElementGuards.ts

@@ -0,0 +1,5 @@
+export const isHTMLOption = (e: Element): e is HTMLOptionElement =>
+  e.tagName === 'OPTION';
+
+export const isHTMLOptgroup = (e: Element): e is HTMLOptGroupElement =>
+  e.tagName === 'OPTGROUP';