feature symfony#1219 [Autocomplete] Avoid destroying on disconnect (weaverryan)

This PR was squashed before being merged into the 2.x branch. Discussion ---------- [Autocomplete] Avoid destroying on disconnect | Q | A | ------------- | --- | Bug fix? | yes | New feature? | no | Tickets | Fix symfony#1204 | License | MIT The tests pass - so I can't see a problem with NOT destroying the element. Commits ------- bcf6f2c [Autocomplete] Avoid destroying on disconnect

Author: weaverryan

src/Autocomplete/assets/dist/controller.js

@@ -61,7 +61,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

@@ -84,7 +84,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

@@ -766,4 +766,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']);
+ });
 });