I create a selectize with the following options
{
plugins: ['remove_button'],
delimiter: ',',
loadThrottle: 600,
valueField: 'id',
labelField: 'name',
searchField: ['name'],
openOnFocus: true,
preload: 'focus',
render: {
option: function(item, escape) {
var label = item['name'];
return '<div><span>' + escape(label) + '</span></div>';
},
item: function(data, escape) {
var label = data['name'];
return '<div class="item selectize-item">' + escape(label) + '</div>';
}
},
load: loadResults,
onLoad: (data) => {
//Set initial values
var valuesArray = options.initialValue.split(',');
for(var i = 0; i < valuesArray.length; i++)
{
selectize.addItem(valuesArray[i], false);
}
},
create: options.create,
onChange: options.onChange
}
In the markup I set the disabled attribute:
<input name="selectize_test" disabled>
The control is properly disabled. The issue is that, after the selected items are added, I am able to click on the "x" button and remove an item. This is only fixed if I manually run selectize.disable() in the console tab of Chrome. I have tried to run the command inside event listener on('item_add'). The command runs but I am still able to remove an item.
Is there a method to avoid this? I could use setTimeout() but I don't like using it for such tasks. Any better ideas?