feature #919 [Autocomplete] When min chars is not set, keep loading after initial load (weaverryan)

This PR was squashed before being merged into the 2.x branch.

Discussion
----------

[Autocomplete] When min chars is not set, keep loading after initial load

| Q             | A
| ------------- | ---
| Bug fix?      | no
| New feature?  | yes
| Tickets       | From conversation on Slack!
| License       | MIT

This helps with the case where you type 3 characters, get a load, then backspace (or clear all the characters) and loading stops and you can't get new options.

You can see the current behavior by going to https://ux.symfony.com/autocomplete, typing "ban", then backspacing. You will only see "banana" as an option, even if you clear it, unless you guess the first 3 chars of some other option.

Cheers!

Commits
-------

30a1e7d [Autocomplete] When min chars is not set, keep loading after initial load

Author: weaverryan

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

@@ -14,10 +14,7 @@ export default class extends Controller {
         optionsAsHtml: BooleanConstructor;
         noResultsFoundText: StringConstructor;
         noMoreResultsText: StringConstructor;
-        minCharacters: {
-            type: NumberConstructor;
-            default: number;
-        };
+        minCharacters: NumberConstructor;
         tomSelectOptions: ObjectConstructor;
         preload: StringConstructor;
     };
@@ -26,12 +23,14 @@ export default class extends Controller {
     readonly noMoreResultsTextValue: string;
     readonly noResultsFoundTextValue: string;
     readonly minCharactersValue: number;
+    readonly hasMinCharactersValue: boolean;
     readonly tomSelectOptionsValue: object;
     readonly hasPreloadValue: boolean;
     readonly preloadValue: string;
     tomSelect: TomSelect;
     private mutationObserver;
     private isObserving;
+    private hasLoadedChoicesPreviously;
     initialize(): void;
     connect(): void;
     disconnect(): void;

src/Autocomplete/assets/dist/controller.js

@@ -28,6 +28,7 @@ class default_1 extends Controller {
         super(...arguments);
         _default_1_instances.add(this);
         this.isObserving = false;
+        this.hasLoadedChoicesPreviously = false;
     }
     initialize() {
         if (this.requiresLiveIgnore()) {
@@ -49,7 +50,7 @@ class default_1 extends Controller {
     }
     connect() {
         if (this.urlValue) {
-            this.tomSelect = __classPrivateFieldGet(this, _default_1_instances, "m", _default_1_createAutocompleteWithRemoteData).call(this, this.urlValue, this.minCharactersValue);
+            this.tomSelect = __classPrivateFieldGet(this, _default_1_instances, "m", _default_1_createAutocompleteWithRemoteData).call(this, this.urlValue, this.hasMinCharactersValue ? this.minCharactersValue : null);
             return;
         }
         if (this.optionsAsHtmlValue) {
@@ -291,8 +292,17 @@ _default_1_instances = new WeakSet(), _default_1_getCommonConfig = function _def
             })
                 .catch(() => callback([], []));
         },
-        shouldLoad: function (query) {
-            return query.length >= minCharacterLength;
+        shouldLoad: (query) => {
+            if (null !== minCharacterLength) {
+                return query.length >= minCharacterLength;
+            }
+            if (this.hasLoadedChoicesPreviously) {
+                return true;
+            }
+            if (query.length > 0) {
+                this.hasLoadedChoicesPreviously = true;
+            }
+            return query.length >= 3;
         },
         optgroupField: 'group_by',
         score: function (search) {
@@ -334,7 +344,7 @@ default_1.values = {
     optionsAsHtml: Boolean,
     noResultsFoundText: String,
     noMoreResultsText: String,
-    minCharacters: { type: Number, default: 3 },
+    minCharacters: Number,
     tomSelectOptions: Object,
     preload: String,
 };

src/Autocomplete/assets/src/controller.ts

@@ -17,7 +17,7 @@ export default class extends Controller {
         optionsAsHtml: Boolean,
         noResultsFoundText: String,
         noMoreResultsText: String,
-        minCharacters: { type: Number, default: 3 },
+        minCharacters: Number,
         tomSelectOptions: Object,
         preload: String,
     };
@@ -27,13 +27,15 @@ export default class extends Controller {
     declare readonly noMoreResultsTextValue: string;
     declare readonly noResultsFoundTextValue: string;
     declare readonly minCharactersValue: number;
+    declare readonly hasMinCharactersValue: boolean;
     declare readonly tomSelectOptionsValue: object;
     declare readonly hasPreloadValue: boolean;
     declare readonly preloadValue: string;
     tomSelect: TomSelect;
 
     private mutationObserver: MutationObserver;
     private isObserving = false;
+    private hasLoadedChoicesPreviously = false;
 
     initialize() {
         if (this.requiresLiveIgnore()) {
@@ -62,7 +64,10 @@ export default class extends Controller {
 
     connect() {
         if (this.urlValue) {
-            this.tomSelect = this.#createAutocompleteWithRemoteData(this.urlValue, this.minCharactersValue);
+            this.tomSelect = this.#createAutocompleteWithRemoteData(
+                this.urlValue,
+                this.hasMinCharactersValue ? this.minCharactersValue : null
+            );
 
             return;
         }
@@ -163,7 +168,7 @@ export default class extends Controller {
         return this.#createTomSelect(config);
     }
 
-    #createAutocompleteWithRemoteData(autocompleteEndpointUrl: string, minCharacterLength: number): TomSelect {
+    #createAutocompleteWithRemoteData(autocompleteEndpointUrl: string, minCharacterLength: number | null): TomSelect {
         const config: RecursivePartial<TomSettings> = this.#mergeObjects(this.#getCommonConfig(), {
             firstUrl: (query: string) => {
                 const separator = autocompleteEndpointUrl.includes('?') ? '&' : '?';
@@ -184,8 +189,26 @@ export default class extends Controller {
                     })
                     .catch(() => callback([], []));
             },
-            shouldLoad: function (query: string) {
-                return query.length >= minCharacterLength;
+            shouldLoad: (query: string) => {
+                // if min length is specified, always use it
+                if (null !== minCharacterLength) {
+                    return query.length >= minCharacterLength;
+                }
+
+                // otherwise, default to 3, but always load after the first request
+                // this gives nice behavior when the user deletes characters and
+                // goes below the minimum length, it will still load fresh choices
+
+                if (this.hasLoadedChoicesPreviously) {
+                    return true;
+                }
+
+                // mark that the choices have loaded (but avoid initial load)
+                if (query.length > 0) {
+                    this.hasLoadedChoicesPreviously = true;
+                }
+
+                return query.length >= 3;
             },
             optgroupField: 'group_by',
             // avoid extra filtering after results are returned

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

@@ -227,6 +227,96 @@ describe('AutocompleteController', () => {
         expect(tomSelect.settings.shouldLoad('')).toBeTruthy()
     })
 
+    it('default min-characters will always load after first load', 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 controlInput = tomSelect.control_input;
+
+        // ajax call from initial focus
+        fetchMock.mock(
+            '/path/to/autocomplete?query=',
+            JSON.stringify({
+                results: [
+                    {
+                        value: 1,
+                        text: 'pizza'
+                    },
+                ],
+            }),
+        );
+        // wait for the initial Ajax request to finish
+        userEvent.click(controlInput);
+        await waitFor(() => {
+            expect(container.querySelectorAll('.option[data-selectable]')).toHaveLength(1);
+        });
+
+        // min length will default to 3, so this is too short
+        controlInput.value = 'fo';
+        controlInput.dispatchEvent(new Event('input'));
+        // should still have just 1 option
+        await waitFor(() => {
+            expect(container.querySelectorAll('.option[data-selectable]')).toHaveLength(1);
+        });
+
+        // now trigger a load
+        fetchMock.mock(
+            '/path/to/autocomplete?query=foo',
+            JSON.stringify({
+                results: [
+                    {
+                        value: 1,
+                        text: 'pizza'
+                    },
+                    {
+                        value: 2,
+                        text: 'popcorn'
+                    },
+                ],
+            }),
+        );
+        controlInput.value = 'foo';
+        controlInput.dispatchEvent(new Event('input'));
+
+        await waitFor(() => {
+            expect(container.querySelectorAll('.option[data-selectable]')).toHaveLength(2);
+        });
+
+        // now go below the min characters, but it should still load
+        fetchMock.mock(
+            '/path/to/autocomplete?query=fo',
+            JSON.stringify({
+                results: [
+                    {
+                        value: 1,
+                        text: 'pizza'
+                    },
+                    {
+                        value: 2,
+                        text: 'popcorn'
+                    },
+                    {
+                        value: 3,
+                        text: 'apples'
+                    },
+                ],
+            }),
+        );
+        controlInput.value = 'fo';
+        controlInput.dispatchEvent(new Event('input'));
+
+        await waitFor(() => {
+            expect(container.querySelectorAll('.option[data-selectable]')).toHaveLength(3);
+        });
+    });
+
     it('adds work-around for live-component & multiple select', async () => {
         const { container } = await startAutocompleteTest(`
             <div>

src/Autocomplete/src/Doctrine/SearchEscaper.php

@@ -48,7 +48,11 @@ private static function isDqlReservedKeyword(string $string): bool
         $lexer->moveNext();
         $token = $lexer->lookahead;
 
-        if (200 <= $token['type']) {
+        // backwards compat for when $token changed from array to object
+        // https://github.com/doctrine/lexer/pull/79
+        $type = \is_array($token) ? $token['type'] : $token->type;
+
+        if (200 <= $type) {
             return true;
         }
 

src/Autocomplete/src/Form/AutocompleteChoiceTypeExtension.php

@@ -99,7 +99,7 @@ public function configureOptions(OptionsResolver $resolver): void
             'allow_options_create' => false,
             'no_results_found_text' => 'No results found',
             'no_more_results_text' => 'No more results',
-            'min_characters' => 3,
+            'min_characters' => null,
             'max_results' => 10,
             'preload' => 'focus',
         ]);

src/Turbo/tests/app/Entity/Artist.php

@@ -11,41 +11,28 @@
 
 namespace App\Entity;
 
+use Doctrine\Common\Collections\Collection;
 use Doctrine\ORM\Mapping as ORM;
 use Symfony\UX\Turbo\Attribute\Broadcast;
 
 /**
- * @ORM\Entity
- *
- * @Broadcast
- *
  * @author Rick Kuipers <[email protected]>
  */
 #[Broadcast]
+#[ORM\Entity]
 class Artist
 {
-    /**
-     * @ORM\Column(type="integer")
-     *
-     * @ORM\Id
-     *
-     * @ORM\GeneratedValue(strategy="AUTO")
-     *
-     * @var int|null
-     */
-    public $id;
+    #[ORM\Id]
+    #[ORM\GeneratedValue(strategy: 'AUTO')]
+    #[ORM\Column(type: 'integer')]
+    public ?int $id = null;
 
-    /**
-     * @ORM\Column
-     *
-     * @var string
-     */
-    public $name = '';
+    #[ORM\Column]
+    public string $name = '';
 
     /**
-     * @ORM\OneToMany(targetEntity="App\Entity\Song", mappedBy="artist")
-     *
-     * @var Song[]
+     * @var Collection<int, Song>
      */
-    public $songs;
+    #[ORM\OneToMany(targetEntity: Song::class, mappedBy: 'artist')]
+    public Collection $songs;
 }

src/Turbo/tests/app/Entity/Book.php

@@ -15,30 +15,17 @@
 use Symfony\UX\Turbo\Attribute\Broadcast;
 
 /**
- * @ORM\Entity
- *
- * @Broadcast
- *
  * @author Kévin Dunglas <[email protected]>
  */
 #[Broadcast]
+#[ORM\Entity]
 class Book
 {
-    /**
-     * @ORM\Column(type="integer")
-     *
-     * @ORM\Id
-     *
-     * @ORM\GeneratedValue(strategy="AUTO")
-     *
-     * @var int|null
-     */
-    public $id;
+    #[ORM\Id]
+    #[ORM\GeneratedValue(strategy: 'AUTO')]
+    #[ORM\Column(type: 'integer')]
+    public ?int $id = null;
 
-    /**
-     * @ORM\Column
-     *
-     * @var string
-     */
-    public $title = '';
+    #[ORM\Column]
+    public string $title = '';
 }