Added updateSelection configuration option to avoid side effects

README.md

@@ -57,6 +57,10 @@ Its usage should be very similar to `Ember.Select`, but with additional features
     <td valign="top"><code>selection</code></td>
     <td valign="top">Ember-selectize will set this property to the selection that was made. Usually some property on a model, for example. If <code>multiple</code> is <code>true</code>, then it should be an array.</td>
   </tr>
+  <tr>
+    <td valign="top"><code>updateSelection</code></td>
+    <td valign="top">Ember-selectize will update the bound options when you select-item/add-item/remove-item. Setting this option to false will prevent selectize from updating the selection directly. The default value for updateSelection starts as true so override with false. Example: <code>false</code></td>
+  </tr>
   <tr>
     <td valign="top"><code>value</code></td>
     <td valign="top">Ember-selectize will set this property to the *value of the selection* that was made. It is not currently supported in multiple selection mode.</td>

addon/components/ember-selectize.js

@@ -20,6 +20,7 @@ export default Ember.Component.extend({
 
   autocomplete: 'off',
   multiple: false,
+  updateSelection: true,
   maxItems: computed('multiple', function() {
     return this.get('multiple') ? null : 1;
   }),
@@ -200,6 +201,7 @@ export default Ember.Component.extend({
     }
 
     var options = {
+      updateSelection: this.get('updateSelection'),
       plugins: this.plugins,
       labelField: 'label',
       valueField: 'value',
@@ -364,7 +366,10 @@ export default Ember.Component.extend({
   * In addition to emitting the selection object, a selection value is sent via `select-value` based on `optionValuePath`
   */
   _updateSelection(selection) {
-    this.set('selection', selection);
+    var updateSelection = this.get('updateSelection');
+    if(updateSelection) {
+        this.set('selection', selection);
+    }
 
     // allow the observers and computed properties to run first
     Ember.run.schedule('actions', this, function() {
@@ -378,7 +383,10 @@ export default Ember.Component.extend({
     var _valuePath = this.get('_valuePath');
     var val = Ember.get(obj, _valuePath);
 
-    this.get('selection').addObject(obj);
+    var updateSelection = this.get('updateSelection');
+    if(updateSelection) {
+        this.get('selection').addObject(obj);
+    }
 
     Ember.run.schedule('actions', this, function() {
       this.sendAction('add-item', obj);
@@ -390,7 +398,10 @@ export default Ember.Component.extend({
     let _valuePath = this.get('_valuePath');
     let val = Ember.get(obj, _valuePath);
 
-    this.get('selection').removeObject(obj);
+    var updateSelection = this.get('updateSelection');
+    if(updateSelection) {
+        this.get('selection').removeObject(obj);
+    }
 
     Ember.run.schedule('actions', this, function() {
       this.sendAction('remove-item', obj);

package.json

@@ -27,7 +27,7 @@
     "ember-cli-content-security-policy": "0.4.0",
     "ember-cli-dependency-checker": "^1.0.0",
     "ember-cli-htmlbars": "0.7.9",
-    "ember-cli-htmlbars-inline-precompile": "^0.1.1",
+    "ember-cli-htmlbars-inline-precompile": "^0.2.0",
     "ember-cli-ic-ajax": "0.2.1",
     "ember-cli-inject-live-reload": "^1.3.0",
     "ember-cli-qunit": "0.3.15",

tests/dummy/app/components/issue-detail-multi.js

@@ -0,0 +1,12 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+    actions: {
+        add: function() {
+            //do nothing here on purpose
+        },
+        remove: function() {
+            //do nothing here on purpose
+        }
+    }
+});

tests/dummy/app/components/issue-detail.js

@@ -0,0 +1,10 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+    actions: {
+        selected: function(status) {
+            let issue = this.get('model');
+            issue.change_collection(status.get('id'));
+        }
+    }
+});

tests/dummy/app/models/issue.js

@@ -0,0 +1,17 @@
+import Ember from 'ember';
+
+var Issue = Ember.Object.extend({
+    subject: '',
+    init: function() {
+        this.collection = Ember.A([]);
+    },
+    change_collection: function(the_status_id) {
+        let issue_id = this.get('id');
+        if(the_status_id) {
+            let collection = this.get('collection') || [];
+            this.set('collection', collection.concat(issue_id));
+        }
+    }
+});
+
+export default Issue;

tests/dummy/app/models/status.js

@@ -0,0 +1,7 @@
+import Ember from 'ember';
+
+var Status = Ember.Object.extend({
+    name: ''
+});
+
+export default Status;

tests/dummy/app/templates/components/issue-detail-multi.hbs

@@ -0,0 +1,13 @@
+{{ember-selectize
+  required=true
+  updateSelection=false
+  multiple=true
+  content=statuses
+  optionValuePath="content.id"
+  optionLabelPath="content.name"
+  selection=model.collection
+  add-item="add"
+  remove-item="remove"
+  class="x-status-select"
+  placeholder="select one status"
+}}

tests/dummy/app/templates/components/issue-detail.hbs

@@ -0,0 +1,10 @@
+{{ember-selectize
+  content=statuses
+  updateSelection=false
+  optionValuePath="content.id"
+  optionLabelPath="content.name"
+  selection=model.collection
+  select-item="selected"
+  class="x-status-select"
+  placeholder="select one status"
+}}

tests/integration/components/issue-detail-test.js

@@ -0,0 +1,63 @@
+import Ember from 'ember';
+import hbs from 'htmlbars-inline-precompile';
+import { moduleForComponent, test } from 'ember-qunit';
+import Issue from 'dummy/models/issue';
+import Status from 'dummy/models/status';
+
+let issue, one, two, statuses;
+
+moduleForComponent('issue-detail', 'integration: issue-detail test', {
+    integration: true,
+    setup() {
+        issue = Issue.create({id: 1, subject: 'Broken'});
+        one = Status.create({id: 8, name: 'Open', issues: []});
+        two = Status.create({id: 9, name: 'Closed', issues: [1]});
+        statuses = Ember.A([one, two]);
+    }
+});
+
+test('select-item will not modify the selection when updateSelection is false', function(assert) {
+    this.set('model', issue);
+    this.set('statuses', statuses);
+    this.render(hbs`{{issue-detail model=model statuses=statuses}}`);
+    let selector = 'select.x-status-select:eq(0) + .selectize-control';
+    let $component = this.$(selector);
+    assert.equal($component.find('div.item').length, 0);
+    assert.equal($component.find('div.option').length, 2);
+    this.$(`${selector} > .selectize-input`).trigger('click');
+    Ember.run(() => {
+        this.$(`${selector} > .selectize-dropdown div.option:eq(0)`).trigger('click').trigger('change');
+    });
+    assert.equal(issue.get('collection.length'), 1);
+    assert.equal(issue.get('collection')[0], 1);
+});
+
+test('add-item will not modify the selection when updateSelection is false', function(assert) {
+    this.set('model', issue);
+    this.set('statuses', statuses);
+    this.render(hbs`{{issue-detail-multi model=model statuses=statuses}}`);
+    let selector = 'select.x-status-select:eq(0) + .selectize-control';
+    let $component = this.$(selector);
+    assert.equal($component.find('div.item').length, 0);
+    assert.equal($component.find('div.option').length, 2);
+    this.$(`${selector} > .selectize-input`).trigger('click');
+    Ember.run(() => {
+        this.$(`${selector} > .selectize-dropdown div.option:eq(0)`).trigger('click').trigger('change');
+    });
+    assert.equal(issue.get('collection.length'), 0);
+});
+
+test('remove-item will not modify the selection when updateSelection is false', function(assert) {
+    issue.set('collection', Ember.A([one]));
+    this.set('model', issue);
+    this.set('statuses', statuses);
+    this.render(hbs`{{issue-detail-multi model=model statuses=statuses}}`);
+    let selector = 'select.x-status-select:eq(0) + .selectize-control';
+    let $component = this.$(selector);
+    assert.equal($component.find('div.item').length, 1);
+    assert.equal($component.find('div.option').length, 1);
+    Ember.run(() => {
+        $component.find('div.item .remove').trigger('click').trigger('change');
+    });
+    assert.equal(issue.get('collection.length'), 1);
+});