Added value not adding to content or selection

[aluink]

When I create a create a new item I'm unable to get it to show up in the content or selection.

  {{ember-selectize
    content=qualityList
    optionValuePath="content.id"
    optionLabelPath="content.name"
    selection=selectedQualities
    multiple=true
    create-item=(action 'createNewQuality')
    placeholder="Choose what to look for.." }}

The action:

createNewQuality(name) {
  this.get('store').createRecord('quality', { name }).save().then(
    q => {
      this.get('qualityList').addObject(q);
      this.get('selectedQualities').addObject(q);
    });
},

I can confirm in Ember inspector that both qualityList and selectedQualities have the added value after the operation is complete. Yet, on-screen, the dropdown doesn't include the new value nor does the selection change to include the new value. Am I doing something wrong or is there a bug here?

Quality is simply { id: ..., name: ... }. The model is well formed.

[onsmith]

Does your implementation require that the record is saved before it is accepted by selectize? I'm no expert, but I would recommend adding the new record to qualityList and selectedQualities before saving it. Then, if saving fails, go back and remove the record from selectize. This solution will appear more responsive to users as well.

Something like this:

createNewQuality(name) {
  // First create the new record in the store
  const quality = this.get('store').createRecord('quality', { name });

  // Grab lists for future use
  const qualityList = this.get('qualityList');
  const selectedQualities = this.get('selectedQualities');

  // Add the record to selectize properties, even though it isn't saved yet
  qualityList.addObject(quality);
  selectedQualities.addObject(quality);

  // Now go back and save the new record
  quality.save().then(function(value) {
    // Successful save, no need to do anything
  }, function(reason) {
    // Save failed, remove object from lists
    qualityList.removeObject(quality);
    selectedQualities.removeObject(quality);
  });
},

[aluink]

I can see the value in adding it before for UX reasons. My concern is quality.id is created by the backend. Are there ramifications for adding a record to the selectize that lacks an id and then updating it afterwards?