refactor: add BC on tom-select remote data

Author: jvancoillie

src/Autocomplete/assets/dist/controller.js

@@ -131,7 +131,7 @@ _instances = new WeakSet(), _getCommonConfig = function _getCommonConfig() {
             const url = this.getUrl(query);
             fetch(url)
                 .then(response => response.json())
-                .then(json => { this.setNextUrl(query, json.next_page); callback(json.results.options, json.results.optgroups || []); })
+                .then(json => { this.setNextUrl(query, json.next_page); callback(json.results.options || json.results, json.results.optgroups || []); })
                 .catch(() => callback());
         },
         shouldLoad: function (query) {

src/Autocomplete/assets/src/controller.ts

@@ -141,7 +141,7 @@ export default class extends Controller {
                 fetch(url)
                     .then(response => response.json())
                     // important: next_url must be set before invoking callback()
-                    .then(json => { this.setNextUrl(query, json.next_page); callback(json.results.options, json.results.optgroups || []) })
+                    .then(json => { this.setNextUrl(query, json.next_page); callback(json.results.options || json.results, json.results.optgroups || []) })
                     .catch(() => callback());
             },
             shouldLoad: function (query: string) {

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

@@ -87,6 +87,71 @@ describe('AutocompleteController', () => {
         expect(tomSelect.input).toBe(getByTestId(container, 'main-element'));
     });
 
+    it('connect with ajax URL BC data', async () => {
+        const container = mountDOM(`
+            <label for="the-select">Items</label>
+            <select
+                id="the-select"
+                data-testid="main-element"
+                data-controller="check autocomplete"
+                data-autocomplete-url-value="/path/to/autocomplete"
+            ></select>
+        `);
+
+        application = startStimulus();
+
+        await waitFor(() => {
+            expect(getByTestId(container, 'main-element')).toHaveClass('connected');
+        });
+
+        // initial Ajax request on focus
+        fetchMock.mock(
+            '/path/to/autocomplete?query=',
+            JSON.stringify({
+                results:  [
+                        {
+                            value: 3,
+                            text: 'salad'
+                        },
+                    ]
+            }),
+        );
+
+        fetchMock.mock(
+            '/path/to/autocomplete?query=foo',
+            JSON.stringify({
+                results:  [
+                        {
+                            value: 1,
+                            text: 'pizza'
+                        },
+                        {
+                            value: 2,
+                            text: 'popcorn'
+                        }
+                    ]
+            }),
+        );
+
+        const tomSelect = getByTestId(container, 'main-element').tomSelect;
+        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);
+        });
+
+        // typing was not properly triggering, for some reason
+        //userEvent.type(controlInput, 'foo');
+        controlInput.value = 'foo';
+        controlInput.dispatchEvent(new Event('input'));
+
+        await waitFor(() => {
+            expect(container.querySelectorAll('.option[data-selectable]')).toHaveLength(2);
+        });
+    });
+
     it('connect with ajax URL', async () => {
         const container = mountDOM(`
             <label for="the-select">Items</label>