[Autocomplete] Avoid destroying on disconnect

Author: weaverryan

src/Autocomplete/assets/dist/controller.js

@@ -62,7 +62,28 @@ class default_1 extends Controller {
     }
     disconnect() {
         this.stopMutationObserver();
+        let currentSelectedValues = [];
+        if (this.selectElement) {
+            if (this.selectElement.multiple) {
+                currentSelectedValues = Array.from(this.selectElement.options)
+                    .filter((option) => option.selected)
+                    .map((option) => option.value);
+            }
+            else {
+                currentSelectedValues = [this.selectElement.value];
+            }
+        }
         this.tomSelect.destroy();
+        if (this.selectElement) {
+            if (this.selectElement.multiple) {
+                Array.from(this.selectElement.options).forEach((option) => {
+                    option.selected = currentSelectedValues.includes(option.value);
+                });
+            }
+            else {
+                this.selectElement.value = currentSelectedValues[0];
+            }
+        }
     }
     getMaxOptions() {
         return this.selectElement ? this.selectElement.options.length : 50;

src/Autocomplete/assets/src/controller.ts

@@ -86,7 +86,35 @@ export default class extends Controller {
 
     disconnect() {
         this.stopMutationObserver();
+
+        // TomSelect.destroy() resets the element to its original HTML. This
+        // causes the selected value to be lost. We store it.
+        let currentSelectedValues: string[] = [];
+        if (this.selectElement) {
+            if (this.selectElement.multiple) {
+                // For multiple selects, store the array of selected values
+                currentSelectedValues = Array.from(this.selectElement.options)
+                    .filter((option) => option.selected)
+                    .map((option) => option.value);
+            } else {
+                // For single select, store the single value
+                currentSelectedValues = [this.selectElement.value];
+            }
+        }
+
         this.tomSelect.destroy();
+
+        if (this.selectElement) {
+            if (this.selectElement.multiple) {
+                // Restore selections for multiple selects
+                Array.from(this.selectElement.options).forEach((option) => {
+                    option.selected = currentSelectedValues.includes(option.value);
+                });
+            } else {
+                // Restore selection for single select
+                this.selectElement.value = currentSelectedValues[0];
+            }
+        }
     }
 
     #getCommonConfig(): Partial<TomSettings> {

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

@@ -726,4 +726,53 @@ describe('AutocompleteController', () => {
         expect(fetchMock.requests()[0].url).toEqual('/path/to/autocomplete?query=');
         expect(fetchMock.requests()[1].url).toEqual('/path/to/autocomplete?query=foo');
     });
+
+    it('preserves the selected value and HTML with disconnect on single select', async () => {
+        const { container, tomSelect } = await startAutocompleteTest(`
+            <select data-testid="main-element" data-controller="autocomplete">
+                <option value="">Select a dog</option>
+                <option value="1">dog1</option>
+                <option value="2">dog2</option>
+                <option value="3">dog3</option>
+            </select>
+        `);
+
+        tomSelect.addItem('2');
+
+        const selectElement = getByTestId(container, 'main-element') as HTMLSelectElement;
+        // trigger the disconnect
+        selectElement.removeAttribute('data-controller');
+        await waitFor(() => {
+            expect(selectElement.className).not.toContain('tomselected');
+        });
+        expect(selectElement.value).toBe('2');
+    });
+
+    it('preserves the selected value and HTML with disconnect on multiple select', async () => {
+        const { container, tomSelect } = await startAutocompleteTest(`
+            <select multiple data-testid="main-element" data-controller="autocomplete">
+                <option value="">Select a dog</option>
+                <option value="1">dog1</option>
+                <option value="2">dog2</option>
+                <option value="3">dog3</option>
+            </select>
+        `);
+
+        tomSelect.addItem('2');
+        tomSelect.addItem('3');
+
+        const getSelectedValues = () => {
+            return Array.from(selectElement.selectedOptions).map((option) => option.value).sort();
+        }
+
+        const selectElement = getByTestId(container, 'main-element') as HTMLSelectElement;
+        expect(getSelectedValues()).toEqual(['2', '3']);
+
+        // trigger the disconnect
+        selectElement.removeAttribute('data-controller');
+        await waitFor(() => {
+            expect(selectElement.className).not.toContain('tomselected');
+        });
+        expect(getSelectedValues()).toEqual(['2', '3']);
+    });
 });