Selectize.js: onItemAdd event triggered when silently adding an item

Question

Using Selectize.js, I'm trying to initialize the dynamically pre-select one of the item of the list without triggering the onItemAdd event. In the following code, the event is triggered even if the silent parameter is truthy:

$(function () {
    $('select').selectize({
        onItemAdd: function () {
            alert("Add item");
        }
    });
    // this triggers an the event
    $('select')[0].selectize.addItem('2', true);
});

JSFiddle: http://jsfiddle.net/zuzat0dc/1/

According to the documentation:

• addItem(value, silent): "Selects" an item. Adds it to the list at the current caret position. If "silent" is truthy, no change event will be fired on the original input.

Any idea how to avoid triggering the onItemAdd event? Is the silent parameter b0rked or should I use the change event instead?

Froe

Note: I could use the off(...) and on(...) functions to disable the handler, add the item then re-enable to handler, but that doesn't look like the way it should be done =/ – Froe

What do you run .off() and .on()? The original select? – Neolith

I'm pretty sure it was the .on() and .off() event methods of the selectize instance – Froe

Answer 1

A quick fix that worked for me was to keep a state flag and refer to it in the event handler...

$(function () {

  var initialising = true;

  $('select').selectize({
    onItemAdd: function () {
      if(!initialising) { 
        alert("Add item");
      }
    }
  });

  // this triggers an the event
  $('select')[0].selectize.addItem('2', true);

  initialising = false;
});

Warmhearted

Yeah that's an "acceptable" solution although it is kind of hacky... :-p – Froe

Answer 2

The silent parameter in addItem(value, silent) affects only to the fact whether or not the change event. You can't avoid item_add event with silent = true.

Epanaphora

And so, there is no way to avoid the item_add event to be fired other than using off(...) before and on(...) after manually adding the item? – Froe

Actually this is not true, the change event is fired anyway. The JSFiddle linked in the initial question has been updated to show this. – Froe

It's a bug in 0.12.0 version. Try this sample jsfiddle.net/6zyums3d/1 with 0.12.1 version. – Epanaphora

@Epanaphora I'm still seeing this issue in 0.12.6 and 0.12.4, actually. setValue() fires onItemAdd even though my understanding is it should not when "silent". I fixed my problem by changing my event binding FROM "onItemAdd: selectionChange(...)" TO "onChange: selectionChange(...)" – Eveleen

Answer 3

The only thing that worked for me was to store item_add event locally, remove it from selectize instance and set it back after I added the item:

onItemAdd: function(val) {
  var e = this._events['item_add'];
  delete this._events['item_add'];
  this.addItem(123);
  this._events['item_add'] = e;
}

Neolith