feature #2382 [Autocomplete] Allow configuring TomSelect’s `labelFiel…

…d` (MatTheCat)

This PR was merged into the 2.x branch.

Discussion
----------

[Autocomplete] Allow configuring TomSelect’s `labelField`

| Q             | A
| ------------- | ---
| Bug fix?      | no
| New feature?  | yes
| Issues        | Fix #2375
| License       | MIT

Commits
-------

aeaec35 [Autocomplete] Allow configuring TomSelect’s `labelField`

src/Autocomplete/CHANGELOG.md

@@ -1,5 +1,9 @@
 # CHANGELOG
 
+## 2.22.0
+
+-   Take `labelField` TomSelect option into account #2382
+
 ## 2.21.0
 
 -   Translate the `option_create` option from TomSelect with remote data setup #2279

src/Autocomplete/assets/dist/controller.js

@@ -261,22 +261,26 @@ _default_1_instances = new WeakSet(), _default_1_getCommonConfig = function _def
     });
     return __classPrivateFieldGet(this, _default_1_instances, "m", _default_1_createTomSelect).call(this, config);
 }, _default_1_createAutocompleteWithHtmlContents = function _default_1_createAutocompleteWithHtmlContents() {
-    const config = __classPrivateFieldGet(this, _default_1_instances, "m", _default_1_mergeObjects).call(this, __classPrivateFieldGet(this, _default_1_instances, "m", _default_1_getCommonConfig).call(this), {
+    const commonConfig = __classPrivateFieldGet(this, _default_1_instances, "m", _default_1_getCommonConfig).call(this);
+    const labelField = commonConfig.labelField ?? 'text';
+    const config = __classPrivateFieldGet(this, _default_1_instances, "m", _default_1_mergeObjects).call(this, commonConfig, {
         maxOptions: this.getMaxOptions(),
         score: (search) => {
             const scoringFunction = this.tomSelect.getScoreFunction(search);
             return (item) => {
-                return scoringFunction({ ...item, text: __classPrivateFieldGet(this, _default_1_instances, "m", _default_1_stripTags).call(this, item.text) });
+                return scoringFunction({ ...item, text: __classPrivateFieldGet(this, _default_1_instances, "m", _default_1_stripTags).call(this, item[labelField]) });
             };
         },
         render: {
-            item: (item) => `<div>${item.text}</div>`,
-            option: (item) => `<div>${item.text}</div>`,
+            item: (item) => `<div>${item[labelField]}</div>`,
+            option: (item) => `<div>${item[labelField]}</div>`,
         },
     });
     return __classPrivateFieldGet(this, _default_1_instances, "m", _default_1_createTomSelect).call(this, config);
 }, _default_1_createAutocompleteWithRemoteData = function _default_1_createAutocompleteWithRemoteData(autocompleteEndpointUrl, minCharacterLength) {
-    const config = __classPrivateFieldGet(this, _default_1_instances, "m", _default_1_mergeObjects).call(this, __classPrivateFieldGet(this, _default_1_instances, "m", _default_1_getCommonConfig).call(this), {
+    const commonConfig = __classPrivateFieldGet(this, _default_1_instances, "m", _default_1_getCommonConfig).call(this);
+    const labelField = commonConfig.labelField ?? 'text';
+    const config = __classPrivateFieldGet(this, _default_1_instances, "m", _default_1_mergeObjects).call(this, commonConfig, {
         firstUrl: (query) => {
             const separator = autocompleteEndpointUrl.includes('?') ? '&' : '?';
             return `${autocompleteEndpointUrl}${separator}query=${encodeURIComponent(query)}`;
@@ -306,8 +310,8 @@ _default_1_instances = new WeakSet(), _default_1_getCommonConfig = function _def
         optgroupField: 'group_by',
         score: (search) => (item) => 1,
         render: {
-            option: (item) => `<div>${item.text}</div>`,
-            item: (item) => `<div>${item.text}</div>`,
+            option: (item) => `<div>${item[labelField]}</div>`,
+            item: (item) => `<div>${item[labelField]}</div>`,
             loading_more: () => {
                 return `<div class="loading-more-results">${this.loadingMoreTextValue}</div>`;
             },

src/Autocomplete/assets/src/controller.ts

@@ -177,26 +177,32 @@ export default class extends Controller {
     }
 
     #createAutocompleteWithHtmlContents(): TomSelect {
-        const config = this.#mergeObjects(this.#getCommonConfig(), {
+        const commonConfig = this.#getCommonConfig();
+        const labelField = commonConfig.labelField ?? 'text';
+
+        const config = this.#mergeObjects(commonConfig, {
             maxOptions: this.getMaxOptions(),
             score: (search: string) => {
                 const scoringFunction = this.tomSelect.getScoreFunction(search);
                 return (item: any) => {
                     // strip HTML tags from each option's searchable text
-                    return scoringFunction({ ...item, text: this.#stripTags(item.text) });
+                    return scoringFunction({ ...item, text: this.#stripTags(item[labelField]) });
                 };
             },
             render: {
-                item: (item: any) => `<div>${item.text}</div>`,
-                option: (item: any) => `<div>${item.text}</div>`,
+                item: (item: any) => `<div>${item[labelField]}</div>`,
+                option: (item: any) => `<div>${item[labelField]}</div>`,
             },
         });
 
         return this.#createTomSelect(config);
     }
 
     #createAutocompleteWithRemoteData(autocompleteEndpointUrl: string, minCharacterLength: number | null): TomSelect {
-        const config: RecursivePartial<TomSettings> = this.#mergeObjects(this.#getCommonConfig(), {
+        const commonConfig = this.#getCommonConfig();
+        const labelField = commonConfig.labelField ?? 'text';
+
+        const config: RecursivePartial<TomSettings> = this.#mergeObjects(commonConfig, {
             firstUrl: (query: string) => {
                 const separator = autocompleteEndpointUrl.includes('?') ? '&' : '?';
 
@@ -241,8 +247,8 @@ export default class extends Controller {
             // avoid extra filtering after results are returned
             score: (search: string) => (item: any) => 1,
             render: {
-                option: (item: any) => `<div>${item.text}</div>`,
-                item: (item: any) => `<div>${item.text}</div>`,
+                option: (item: any) => `<div>${item[labelField]}</div>`,
+                item: (item: any) => `<div>${item[labelField]}</div>`,
                 loading_more: (): string => {
                     return `<div class="loading-more-results">${this.loadingMoreTextValue}</div>`;
                 },