Use a stimulus value changed callback to reset the select if the url value changes

Author: pierredup

src/Autocomplete/assets/dist/controller.d.ts

@@ -34,11 +34,11 @@ export default class extends Controller {
     private isObserving;
     private hasLoadedChoicesPreviously;
     private originalOptions;
-    private isRemoteOptions;
     initialize(): void;
     connect(): void;
     initializeTomSelect(): void;
     disconnect(): void;
+    urlValueChanged(): void;
     private getMaxOptions;
     get selectElement(): HTMLSelectElement | null;
     get formElement(): HTMLInputElement | HTMLSelectElement;

src/Autocomplete/assets/dist/controller.js

@@ -30,7 +30,6 @@ class default_1 extends Controller {
         this.isObserving = false;
         this.hasLoadedChoicesPreviously = false;
         this.originalOptions = [];
-        this.isRemoteOptions = false;
     }
     initialize() {
         if (!this.mutationObserver) {
@@ -51,8 +50,6 @@ class default_1 extends Controller {
         }
         if (this.urlValue) {
             this.tomSelect = __classPrivateFieldGet(this, _default_1_instances, "m", _default_1_createAutocompleteWithRemoteData).call(this, this.urlValue, this.hasMinCharactersValue ? this.minCharactersValue : null);
-            this.isRemoteOptions = true;
-            this.startMutationObserver();
             return;
         }
         if (this.optionsAsHtmlValue) {
@@ -87,6 +84,9 @@ class default_1 extends Controller {
             }
         }
     }
+    urlValueChanged() {
+        this.resetTomSelect();
+    }
     getMaxOptions() {
         return this.selectElement ? this.selectElement.options.length : 50;
     }
@@ -170,16 +170,11 @@ class default_1 extends Controller {
                         requireReset = true;
                         break;
                     }
-                    if (mutation.target === this.element &&
-                        mutation.attributeName.match(/data-(symfony--ux-)?autocomplete/)) {
-                        requireReset = true;
-                        break;
-                    }
                     break;
             }
         });
         const newOptions = this.selectElement ? this.createOptionsDataStructure(this.selectElement) : [];
-        const areOptionsEquivalent = this.isRemoteOptions || this.areOptionsEquivalent(newOptions);
+        const areOptionsEquivalent = this.areOptionsEquivalent(newOptions);
         if (!areOptionsEquivalent || requireReset) {
             this.originalOptions = newOptions;
             this.resetTomSelect();

src/Autocomplete/assets/src/controller.ts

@@ -39,7 +39,6 @@ export default class extends Controller {
     private isObserving = false;
     private hasLoadedChoicesPreviously = false;
     private originalOptions: Array<{ value: string; text: string; group: string | null }> = [];
-    private isRemoteOptions = false;
 
     initialize() {
         if (!this.mutationObserver) {
@@ -70,9 +69,6 @@ export default class extends Controller {
                 this.hasMinCharactersValue ? this.minCharactersValue : null
             );
 
-            this.isRemoteOptions = true;
-            this.startMutationObserver();
-
             return;
         }
 
@@ -119,6 +115,10 @@ export default class extends Controller {
         }
     }
 
+    urlValueChanged() {
+        this.resetTomSelect();
+    }
+
     #getCommonConfig(): Partial<TomSettings> {
         const plugins: TPluginHash = {};
 
@@ -393,21 +393,12 @@ export default class extends Controller {
                         break;
                     }
 
-                    if (
-                        mutation.target === this.element &&
-                        mutation.attributeName.match(/data-(symfony--ux-)?autocomplete/)
-                    ) {
-                        requireReset = true;
-
-                        break;
-                    }
-
                     break;
             }
         });
 
         const newOptions = this.selectElement ? this.createOptionsDataStructure(this.selectElement) : [];
-        const areOptionsEquivalent = this.isRemoteOptions || this.areOptionsEquivalent(newOptions);
+        const areOptionsEquivalent = this.areOptionsEquivalent(newOptions);
         if (!areOptionsEquivalent || requireReset) {
             this.originalOptions = newOptions;
             this.resetTomSelect();