Dynamic content and `closeAfterSelect` does not work well together.

[karellm]

Hi,

First, I try to use selectize to select element that are then added to list. But I don't want selectize to actually list the selected element (I want it to remain blank all the time). I also want the list of items to update, so only the element that haven't been selected yet are available.

So I have the following selectize:

// template
{{ember-selectize
  placeholder="Search available metrics"
  content=remainingItems
  optionValuePath="content.id"
  optionLabelPath="content.name"
  selection=selectedItems
  closeAfterSelect=true
}}

// controller
remainingItems: function () {
  var selected = this.get('selectedItems');
  return _.difference(allItems, selected);
}.property('model.items.@each')

That's the short version of the code, it works. The only problem is that when I select an item the dropdown closes and reopens right away. It closes because of the closeAfterSelect option and reopens I don't know why. If I set the option to false, then it stays open and doesn't blink.

I was thinking of a way to trigger a blur on selectize but it really feels hacky. Do you have any suggestion? Thanks!

[oswaldoacauan]

:+1: Same thing happens here, almost same scenario as OP.

[HuckyDucky]

Is this automatic re-open still occurring? Is it only in certain browsers? We have this same use case and were looking to use this add-on, but if there hasn't been any activity since March and this is still occurring we'll have to go a different direction.

[karellm]

@HuckyDucky Yes with 0.4.2 but you can easilly hack through it:

  actions: {
    add() {
      Ember.run.later(() => {
        // HACK selectize does not like dynamic content apparently:
        //   https://github.com/miguelcobain/ember-cli-selectize/issues/38
        $('.selectize-input input').trigger('blur');
      }, 50);
    },
  }

{{ember-selectize
      content=content
      optionValuePath="content.id"
      optionLabelPath="content.name"
      optionGroupPath="content.category"
      selection=selectedMetrics
      multiple=true
      add-item="add"
}}

The important line is the add-item which is called on selection.