Merge branch 'opt-group_fix'

Author: Xon

CHANGELOG.md

@@ -12,6 +12,8 @@
 * Fix regression "no choices to choose from"/"no results found" notice did not reliably trigger. [#1185](https://github.com/Choices-js/Choices/issues/1185) [#1191](https://github.com/Choices-js/Choices/issues/1191)
 * Fix regression of `UnhighlightItem` event not firing [#1173](https://github.com/Choices-js/Choices/issues/1173)
 * Fix `clearChoices()` would remove items, and clear the search flag.
+* Fixes for opt-group handling/rendering
+* Fix `removeChoice()` did not properly remove a choice which was part of a group
 
 ### Chore
 * Add e2e tests for "no choices" behavior to match v10

public/test/select-multiple/index.html

@@ -914,7 +914,9 @@ <h2>Select multiple inputs</h2>
             multiple
           >
             <option value="Choice 1">Choice 1</option>
-            <option value="Choice 2">Choice 2</option>
+            <optgroup label="test">
+              <option value="Choice 2">Choice 2</option>
+            </optgroup>
             <option value="Choice 3">Choice 3</option>
           </select>
           <button class="destroy">Destroy</button>

public/test/select-one/index.html

@@ -870,7 +870,9 @@ <h2>Select one inputs</h2>
             id="choices-new-destroy-init"
           >
             <option value="Choice 1">Choice 1</option>
-            <option value="Choice 2">Choice 2</option>
+            <optgroup label="test">
+              <option value="Choice 2">Choice 2</option>
+            </optgroup>
             <option value="Choice 3">Choice 3</option>
           </select>
           <button class="destroy">Destroy</button>
@@ -926,7 +928,7 @@ <h2>Select one inputs</h2>
           </script>
       </div>
 
-      <div data-test-hook="autocomplete">
+        <div data-test-hook="autocomplete">
         <label for="choices-autocomplete">Autocomplete example</label>
         <select
           class="form-control"
@@ -966,7 +968,7 @@ <h2>Select one inputs</h2>
         </script>
       </div>
 
-
+      </div>
     </div>
   </body>
 </html>

src/scripts/choices.ts

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import { activateChoices, addChoice, removeChoice, filterChoices } from './actions/choices';
 import { addGroup } from './actions/groups';
 import { addItem, highlightItem, removeItem } from './actions/items';
@@ -28,7 +27,7 @@ import Store from './store/store';
 import { coerceBool, mapInputToChoice } from './lib/choice-input';
 import { ChoiceFull } from './interfaces/choice-full';
 import { GroupFull } from './interfaces/group-full';
-import { EventType, KeyCodeMap, PassedElementType, PassedElementTypes } from './interfaces';
+import { EventChoiceValueType, EventType, KeyCodeMap, PassedElementType, PassedElementTypes } from './interfaces';
 import { EventChoice } from './interfaces/event-choice';
 import { NoticeType, NoticeTypes, Templates } from './interfaces/templates';
 import { isHtmlInputElement, isHtmlSelectElement } from './lib/html-guard-statements';
@@ -539,13 +538,10 @@ class Choices {
     return this;
   }
 
-  getValue(valueOnly = false): string[] | EventChoice[] | EventChoice | string {
-    const values = this._store.items.reduce<any[]>((selectedItems, item) => {
-      const itemValue = valueOnly ? item.value : this._getChoiceForOutput(item);
-      selectedItems.push(itemValue);
-
-      return selectedItems;
-    }, []);
+  getValue<B extends boolean = false>(valueOnly?: B): EventChoiceValueType<B> | EventChoiceValueType<B>[] {
+    const values = this._store.items.map((item) => {
+      return (valueOnly ? item.value : this._getChoiceForOutput(item)) as EventChoiceValueType<B>;
+    });
 
     return this._isSelectOneElement || this.config.singleModeForMultiSelect ? values[0] : values;
   }
@@ -788,16 +784,21 @@ class Choices {
 
       this.clearStore(false);
 
-      choicesFromOptions.forEach((groupOrChoice) => {
-        if ('choices' in groupOrChoice) {
-          return;
-        }
-        const choice = groupOrChoice;
+      const updateChoice = (choice: ChoiceFull): void => {
         if (deselectAll) {
           this._store.dispatch(removeItem(choice));
         } else if (existingItems[choice.value]) {
           choice.selected = true;
         }
+      };
+
+      choicesFromOptions.forEach((groupOrChoice) => {
+        if ('choices' in groupOrChoice) {
+          groupOrChoice.choices.forEach(updateChoice);
+
+          return;
+        }
+        updateChoice(groupOrChoice);
       });
 
       /* @todo only generate add events for the added options instead of all
@@ -984,7 +985,7 @@ class Choices {
       if (!this._hasNonChoicePlaceholder && !isSearching && this._isSelectOneElement) {
         // If we have a placeholder choice along with groups
         renderChoices(
-          activeChoices.filter((choice) => choice.placeholder && !choice.groupId),
+          activeChoices.filter((choice) => choice.placeholder && !choice.group),
           false,
           undefined,
         );
@@ -995,6 +996,13 @@ class Choices {
         if (config.shouldSort) {
           activeGroups.sort(config.sorter);
         }
+        // render Choices without group first, regardless of sort, otherwise they won't be distinguishable
+        // from the last group
+        renderChoices(
+          activeChoices.filter((choice) => !choice.placeholder && !choice.group),
+          false,
+          undefined,
+        );
 
         activeGroups.forEach((group) => {
           const groupChoices = renderableChoices(group.choices);
@@ -1160,13 +1168,8 @@ class Choices {
     }
   }
 
-  _getChoiceForOutput(choice?: ChoiceFull, keyCode?: number): EventChoice | undefined {
-    if (!choice) {
-      return undefined;
-    }
-
-    const group = choice.groupId ? this._store.getGroupById(choice.groupId) : null;
-
+  // eslint-disable-next-line class-methods-use-this
+  _getChoiceForOutput(choice: ChoiceFull, keyCode?: number): EventChoice {
     return {
       id: choice.id,
       highlighted: choice.highlighted,
@@ -1178,7 +1181,7 @@ class Choices {
       label: choice.label,
       placeholder: choice.placeholder,
       value: choice.value,
-      groupValue: group && group.label ? group.label : undefined,
+      groupValue: choice.group ? choice.group.label : undefined,
       element: choice.element,
       keyCode,
     };
@@ -2131,7 +2134,7 @@ class Choices {
     group.id = this._lastAddedGroupId;
 
     group.choices.forEach((item: ChoiceFull) => {
-      item.groupId = group.id;
+      item.group = group;
       if (group.disabled) {
         item.disabled = true;
       }

src/scripts/components/wrapped-select.ts

@@ -77,7 +77,7 @@ export default class WrappedSelect extends WrappedElement<HTMLSelectElement> {
 
     return {
       id: 0,
-      groupId: 0,
+      group: null,
       score: 0,
       rank: 0,
       value: option.value,

src/scripts/interfaces/choice-full.ts

@@ -1,7 +1,7 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import { StringUntrusted } from './string-untrusted';
-
-export type CustomProperties = Record<string, any> | string;
+import { Types } from './types';
+// eslint-disable-next-line import/no-cycle
+import { GroupFull } from './group-full';
 
 /*
   A disabled choice appears in the choice dropdown but cannot be selected
@@ -16,11 +16,11 @@ export interface ChoiceFull {
   choiceEl?: HTMLElement;
   labelClass?: Array<string>;
   labelDescription?: string;
-  customProperties?: CustomProperties;
+  customProperties?: Types.CustomProperties;
   disabled: boolean;
   active: boolean;
   elementId?: string;
-  groupId: number;
+  group: GroupFull | null;
   label: StringUntrusted | string;
   placeholder: boolean;
   selected: boolean;

src/scripts/interfaces/event-choice.ts

@@ -1,5 +1,7 @@
 import { InputChoice } from './input-choice';
 
+export type EventChoiceValueType<B extends boolean> = B extends true ? string : EventChoice;
+
 export interface EventChoice extends InputChoice {
   element?: HTMLOptionElement | HTMLOptGroupElement;
   groupValue?: string;

src/scripts/interfaces/group-full.ts

@@ -1,5 +1,4 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
+// eslint-disable-next-line import/no-cycle
 import { ChoiceFull } from './choice-full';
 
 export interface GroupFull {

src/scripts/interfaces/input-choice.ts

@@ -1,17 +1,17 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
 import { StringUntrusted } from './string-untrusted';
+import { Types } from './types';
 
 export interface InputChoice {
   id?: number;
   highlighted?: boolean;
   labelClass?: string | Array<string>;
   labelDescription?: string;
-  customProperties?: Record<string, any> | string;
+  customProperties?: Types.CustomProperties;
   disabled?: boolean;
   active?: boolean;
   label: StringUntrusted | string;
   placeholder?: boolean;
   selected?: boolean;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   value: any;
 }

src/scripts/interfaces/input-group.ts

@@ -1,5 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
 import { InputChoice } from './input-choice';
 import { StringUntrusted } from './string-untrusted';