@@ -24,6 +24,9 @@ import {Controller} from "@hotwired/stimulus";
2424
2525import { trans , ENTITY_SELECT_GROUP_NEW_NOT_ADDED_TO_DB } from '../../translator.js'
2626
27+ import TomSelect_autoselect_typed from '../../tomselect/autoselect_typed/autoselect_typed'
28+ TomSelect . define ( 'autoselect_typed' , TomSelect_autoselect_typed )
29+
2730export default class extends Controller {
2831 _tomSelect ;
2932
@@ -37,11 +40,15 @@ export default class extends Controller {
3740 const allowAdd = this . element . getAttribute ( "data-allow-add" ) === "true" ;
3841 const addHint = this . element . getAttribute ( "data-add-hint" ) ?? "" ;
3942
43+
44+
45+
4046 let settings = {
4147 allowEmptyOption : true ,
4248 selectOnTab : true ,
4349 maxOptions : null ,
4450 create : allowAdd ? this . createItem . bind ( this ) : false ,
51+ createFilter : this . createFilter . bind ( this ) ,
4552
4653 // This three options allow us to paste element names with commas: (see issue #538)
4754 maxItems : 1 ,
@@ -81,8 +88,17 @@ export default class extends Controller {
8188 //Add callbacks to update validity
8289 onInitialize : this . updateValidity . bind ( this ) ,
8390 onChange : this . updateValidity . bind ( this ) ,
91+
92+ plugins : {
93+ "autoselect_typed" : { } ,
94+ }
8495 } ;
8596
97+ //Add clear button plugin, if an empty option is present
98+ if ( this . element . querySelector ( "option[value='']" ) !== null ) {
99+ settings . plugins [ "clear_button" ] = { } ;
100+ }
101+
86102 this . _tomSelect = new TomSelect ( this . element , settings ) ;
87103 //Do not do a sync here as this breaks the initial rendering of the empty option
88104 //this._tomSelect.sync();
@@ -113,6 +129,31 @@ export default class extends Controller {
113129 } ) ;
114130 }
115131
132+ createFilter ( input ) {
133+
134+ //Normalize the input (replace spacing around arrows)
135+ if ( input . includes ( "->" ) ) {
136+ const inputs = input . split ( "->" ) ;
137+ inputs . forEach ( ( value , index ) => {
138+ inputs [ index ] = value . trim ( ) ;
139+ } ) ;
140+ input = inputs . join ( "->" ) ;
141+ } else {
142+ input = input . trim ( ) ;
143+ }
144+
145+ const options = this . _tomSelect . options ;
146+ //Iterate over all options and check if the input is already present
147+ for ( let index in options ) {
148+ const option = options [ index ] ;
149+ if ( option . path === input ) {
150+ return false ;
151+ }
152+ }
153+
154+ return true ;
155+ }
156+
116157
117158 updateValidity ( ) {
118159 //Mark this input as invalid, if the selected option is disabled
0 commit comments