Reset TomSelect when updating controller attributes

Author: pierredup

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

@@ -36,6 +36,7 @@ export default class extends Controller {
     private isObserving;
     private hasLoadedChoicesPreviously;
     private originalOptions;
+    private isRemoteOptions;
     initialize(): void;
     connect(): void;
     initializeTomSelect(): void;

src/Autocomplete/assets/dist/controller.js

@@ -37,6 +37,7 @@ class default_1 extends Controller {
         this.isObserving = false;
         this.hasLoadedChoicesPreviously = false;
         this.originalOptions = [];
+        this.isRemoteOptions = false;
     }
     initialize() {
         if (!this.mutationObserver) {
@@ -57,6 +58,8 @@ 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) {
@@ -180,11 +183,15 @@ class default_1 extends Controller {
                         }
                         break;
                     }
+                    if (mutation.target === this.element && mutation.attributeName.includes('data-symfony--ux-autocomplete')) {
+                        requireReset = true;
+                        break;
+                    }
                     break;
             }
         });
         const newOptions = this.selectElement ? this.createOptionsDataStructure(this.selectElement) : [];
-        const areOptionsEquivalent = this.areOptionsEquivalent(newOptions);
+        const areOptionsEquivalent = this.isRemoteOptions || this.areOptionsEquivalent(newOptions);
         if (!areOptionsEquivalent || requireReset) {
             this.originalOptions = newOptions;
             this.resetTomSelect();

src/Autocomplete/assets/src/controller.ts

@@ -48,6 +48,7 @@ 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) {
@@ -78,6 +79,9 @@ export default class extends Controller {
                 this.hasMinCharactersValue ? this.minCharactersValue : null
             );
 
+            this.isRemoteOptions = true;
+            this.startMutationObserver();
+
             return;
         }
 
@@ -398,12 +402,18 @@ 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.areOptionsEquivalent(newOptions);
+        const areOptionsEquivalent = this.isRemoteOptions || this.areOptionsEquivalent(newOptions);
         if (!areOptionsEquivalent || requireReset) {
             this.originalOptions = newOptions;
             this.resetTomSelect();

src/Autocomplete/assets/test/controller.test.ts

@@ -138,6 +138,80 @@ describe('AutocompleteController', () => {
         expect(fetchMock.requests()[1].url).toEqual('/path/to/autocomplete?query=foo');
     });
 
+    it('resets when ajax URL attribute on a select element changes', async () => {
+        const { container, tomSelect} = await startAutocompleteTest(`
+            <label for="the-select">Items</label>
+            <select
+                id="the-select"
+                data-testid="main-element"
+                data-controller="autocomplete"
+                data-autocomplete-url-value="/path/to/autocomplete"
+            ></select>
+        `);
+
+        const selectElement = getByTestId(container, 'main-element') as HTMLSelectElement;
+
+        // initial Ajax request on focus
+        fetchMock.mockResponseOnce(
+            JSON.stringify({
+                results: [
+                    {
+                        value: 3,
+                        text: 'salad'
+                    },
+                ]
+            }),
+        );
+
+        fetchMock.mockResponseOnce(
+            JSON.stringify({
+                results: [
+                    {
+                        value: 1,
+                        text: 'pizza'
+                    },
+                    {
+                        value: 2,
+                        text: 'popcorn'
+                    }
+                ]
+            }),
+        );
+
+        const controlInput = tomSelect.control_input;
+
+        // wait for the initial Ajax request to finish
+        userEvent.click(controlInput);
+        await waitFor(() => {
+            expect(container.querySelectorAll('.option[data-selectable]')).toHaveLength(1);
+        });
+
+        controlInput.value = 'foo';
+        controlInput.dispatchEvent(new Event('input'));
+
+        await waitFor(() => {
+            expect(container.querySelectorAll('.option[data-selectable]')).toHaveLength(2);
+        });
+
+        expect(selectElement.value).toBe('');
+        tomSelect.addItem('2');
+        expect(selectElement.value).toBe('2');
+
+        selectElement.outerHTML = `
+            <select
+                id="the-select"
+                data-testid="main-element"
+                data-controller="autocomplete"
+                data-autocomplete-url-value="/path/to/autocomplete2"
+            ></select>
+        `;
+
+        // wait for the MutationObserver to flush these changes
+        await shortDelay(10);
+
+        expect(selectElement.value).toBe('');
+    });
+
     it('connect with ajax URL on an input element', async () => {
         const { container, tomSelect } = await startAutocompleteTest(`
             <label for="the-input">Items</label>