bug #1825 [Autocomplete] Fix grouped options order (zavarock, smnandre)

This PR was merged into the 2.x branch.

Discussion
----------

[Autocomplete] Fix grouped options order

| Q             | A
| ------------- | ---
| Bug fix?      | yes
| New feature?  | no
| Issues        | Fix #1616 <!-- prefix each issue number with "Fix #", no need to create an issue if none exist, explain below instead -->
| License       | MIT

The bug is being caused by TomSelect not preserving the order of the option elements in the select as we select the options in the dropdown. In this case, the MutationObserver callback uses the optgroup element as a parameter to "store" the group (if any) to which the option belongs. However, once the option is selected, it no longer has an optgroup as its parentElement (a problem caused by the aforementioned bug).

As I see it, there is no need to "store" the option's group since, in any case, all <option> elements usually have a unique [value], and even if not, it will still work as expected.

A callback was added for options added through [addOption](https://github.com/orchidjs/tom-select/blob/69180fa9e79060060f1824fbde85537579d0005d/src/tom-select.ts#L1636), but the caveat is that it needs the parameter user_created=true to trigger the 'option_add' event.

Commits
-------

4344a3c Yarn cleanup
07b3eeb Build up to date packages
6424bd4 [Autocomplete] Fix grouped options order

src/Autocomplete/assets/dist/controller.js

@@ -195,11 +195,9 @@ class default_1 extends Controller {
     }
     createOptionsDataStructure(selectElement) {
         return Array.from(selectElement.options).map((option) => {
-            const optgroup = option.closest('optgroup');
             return {
                 value: option.value,
                 text: option.text,
-                group: optgroup ? optgroup.label : null,
             };
         });
     }
@@ -216,7 +214,7 @@ class default_1 extends Controller {
         if (filteredOriginalOptions.length !== filteredNewOptions.length) {
             return false;
         }
-        const normalizeOption = (option) => `${option.value}-${option.text}-${option.group}`;
+        const normalizeOption = (option) => `${option.value}-${option.text}`;
         const originalOptionsSet = new Set(filteredOriginalOptions.map(normalizeOption));
         const newOptionsSet = new Set(filteredNewOptions.map(normalizeOption));
         return (originalOptionsSet.size === newOptionsSet.size &&
@@ -250,6 +248,40 @@ _default_1_instances = new WeakSet(), _default_1_getCommonConfig = function _def
             this.tomSelect.setTextboxValue('');
         },
         closeAfterSelect: true,
+        onOptionAdd: (value, data) => {
+            let parentElement = this.tomSelect.input;
+            let optgroupData = null;
+            const optgroup = data[this.tomSelect.settings.optgroupField];
+            if (optgroup && this.tomSelect.optgroups) {
+                optgroupData = this.tomSelect.optgroups[optgroup];
+                if (optgroupData) {
+                    const optgroupElement = parentElement.querySelector(`optgroup[label="${optgroupData.label}"]`);
+                    if (optgroupElement) {
+                        parentElement = optgroupElement;
+                    }
+                }
+            }
+            const optionElement = document.createElement('option');
+            optionElement.value = value;
+            optionElement.text = data[this.tomSelect.settings.labelField];
+            const optionOrder = data.$order;
+            let orderedOption = null;
+            for (const [, tomSelectOption] of Object.entries(this.tomSelect.options)) {
+                if (tomSelectOption.$order === optionOrder) {
+                    orderedOption = parentElement.querySelector(`:scope > option[value="${tomSelectOption[this.tomSelect.settings.valueField]}"]`);
+                    break;
+                }
+            }
+            if (orderedOption) {
+                orderedOption.insertAdjacentElement('afterend', optionElement);
+            }
+            else if (optionOrder >= 0) {
+                parentElement.append(optionElement);
+            }
+            else {
+                parentElement.prepend(optionElement);
+            }
+        },
     };
     if (!this.selectElement && !this.urlValue) {
         config.shouldLoad = () => false;

src/Autocomplete/assets/src/controller.ts

@@ -17,6 +17,10 @@ export interface AutocompleteConnectOptions {
     tomSelect: TomSelect;
     options: any;
 }
+interface OptionDataStructure {
+    value: string;
+    text: string;
+}
 
 export default class extends Controller {
     static values = {
@@ -47,7 +51,7 @@ export default class extends Controller {
     private mutationObserver: MutationObserver;
     private isObserving = false;
     private hasLoadedChoicesPreviously = false;
-    private originalOptions: Array<{ value: string; text: string; group: string | null }> = [];
+    private originalOptions: Array<OptionDataStructure> = [];
 
     initialize() {
         if (!this.mutationObserver) {
@@ -158,6 +162,47 @@ export default class extends Controller {
                 this.tomSelect.setTextboxValue('');
             },
             closeAfterSelect: true,
+            // fix positioning (in the dropdown) of options added through addOption()
+            onOptionAdd: (value: string, data: { [key: string]: any }) => {
+                let parentElement = this.tomSelect.input as Element;
+                let optgroupData = null;
+
+                const optgroup = data[this.tomSelect.settings.optgroupField];
+                if (optgroup && this.tomSelect.optgroups) {
+                    optgroupData = this.tomSelect.optgroups[optgroup];
+                    if (optgroupData) {
+                        const optgroupElement = parentElement.querySelector(`optgroup[label="${optgroupData.label}"]`);
+                        if (optgroupElement) {
+                            parentElement = optgroupElement;
+                        }
+                    }
+                }
+
+                const optionElement = document.createElement('option');
+                optionElement.value = value;
+                optionElement.text = data[this.tomSelect.settings.labelField];
+
+                const optionOrder = data.$order;
+                let orderedOption = null;
+
+                for (const [, tomSelectOption] of Object.entries(this.tomSelect.options)) {
+                    if (tomSelectOption.$order === optionOrder) {
+                        orderedOption = parentElement.querySelector(
+                            `:scope > option[value="${tomSelectOption[this.tomSelect.settings.valueField]}"]`
+                        );
+
+                        break;
+                    }
+                }
+
+                if (orderedOption) {
+                    orderedOption.insertAdjacentElement('afterend', optionElement);
+                } else if (optionOrder >= 0) {
+                    parentElement.append(optionElement);
+                } else {
+                    parentElement.prepend(optionElement);
+                }
+            },
         };
 
         // for non-autocompleting input elements, avoid the "No results" message that always shows
@@ -420,20 +465,16 @@ export default class extends Controller {
         }
     }
 
-    private createOptionsDataStructure(
-        selectElement: HTMLSelectElement
-    ): Array<{ value: string; text: string; group: string | null }> {
+    private createOptionsDataStructure(selectElement: HTMLSelectElement): Array<OptionDataStructure> {
         return Array.from(selectElement.options).map((option) => {
-            const optgroup = option.closest('optgroup');
             return {
                 value: option.value,
                 text: option.text,
-                group: optgroup ? optgroup.label : null,
             };
         });
     }
 
-    private areOptionsEquivalent(newOptions: Array<{ value: string; text: string; group: string | null }>): boolean {
+    private areOptionsEquivalent(newOptions: Array<OptionDataStructure>): boolean {
         // remove the empty option, which is added by TomSelect so may be missing from new options
         const filteredOriginalOptions = this.originalOptions.filter((option) => option.value !== '');
         const filteredNewOptions = newOptions.filter((option) => option.value !== '');
@@ -453,8 +494,7 @@ export default class extends Controller {
             return false;
         }
 
-        const normalizeOption = (option: { value: string; text: string; group: string | null }) =>
-            `${option.value}-${option.text}-${option.group}`;
+        const normalizeOption = (option: OptionDataStructure) => `${option.value}-${option.text}`;
         const originalOptionsSet = new Set(filteredOriginalOptions.map(normalizeOption));
         const newOptionsSet = new Set(filteredNewOptions.map(normalizeOption));