2

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?

cosan
  • 155
  • 2
  • 14

0 Answers0