Add cllear button to entity select type

Author: jbtronics

assets/controllers/elements/structural_entity_select_controller.js

@@ -24,6 +24,9 @@ import {Controller} from "@hotwired/stimulus";
 
 import {trans, ENTITY_SELECT_GROUP_NEW_NOT_ADDED_TO_DB} from '../../translator.js'
 
+import TomSelect_autoselect_typed from '../../tomselect/autoselect_typed/autoselect_typed'
+TomSelect.define('autoselect_typed', TomSelect_autoselect_typed)
+
 export default class extends Controller {
     _tomSelect;
 
@@ -37,6 +40,9 @@ export default class extends Controller {
         const allowAdd = this.element.getAttribute("data-allow-add") === "true";
         const addHint = this.element.getAttribute("data-add-hint") ?? "";
 
+
+
+
         let settings = {
             allowEmptyOption: true,
             selectOnTab: true,
@@ -81,8 +87,17 @@ export default class extends Controller {
             //Add callbacks to update validity
             onInitialize: this.updateValidity.bind(this),
             onChange: this.updateValidity.bind(this),
+
+            plugins: {
+                "autoselect_typed": {},
+            }
         };
 
+        //Add clear button plugin, if an empty option is present
+        if (this.element.querySelector("option[value='']") !== null) {
+            settings.plugins["clear_button"] = {};
+        }
+
         this._tomSelect = new TomSelect(this.element, settings);
         //Do not do a sync here as this breaks the initial rendering of the empty option
         //this._tomSelect.sync();