diff --git a/README.md b/README.md
index c6d35f6..099d7dc 100644
--- a/README.md
+++ b/README.md
@@ -57,6 +57,10 @@ Its usage should be very similar to `Ember.Select`, but with additional features
selection |
Ember-selectize will set this property to the selection that was made. Usually some property on a model, for example. If multiple is true, then it should be an array. |
+
+ updateSelection |
+ 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: false |
+
value |
Ember-selectize will set this property to the *value of the selection* that was made. It is not currently supported in multiple selection mode. |
diff --git a/addon/components/ember-selectize.js b/addon/components/ember-selectize.js
index a759975..64b63eb 100644
--- a/addon/components/ember-selectize.js
+++ b/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);
diff --git a/package.json b/package.json
index 50e2fa4..bafc893 100644
--- a/package.json
+++ b/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",
diff --git a/tests/dummy/app/components/issue-detail-multi.js b/tests/dummy/app/components/issue-detail-multi.js
new file mode 100644
index 0000000..86e5a56
--- /dev/null
+++ b/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
+ }
+ }
+});
diff --git a/tests/dummy/app/components/issue-detail.js b/tests/dummy/app/components/issue-detail.js
new file mode 100644
index 0000000..0044e61
--- /dev/null
+++ b/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'));
+ }
+ }
+});
diff --git a/tests/dummy/app/models/issue.js b/tests/dummy/app/models/issue.js
new file mode 100644
index 0000000..7f34d5b
--- /dev/null
+++ b/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;
diff --git a/tests/dummy/app/models/status.js b/tests/dummy/app/models/status.js
new file mode 100644
index 0000000..f474494
--- /dev/null
+++ b/tests/dummy/app/models/status.js
@@ -0,0 +1,7 @@
+import Ember from 'ember';
+
+var Status = Ember.Object.extend({
+ name: ''
+});
+
+export default Status;
diff --git a/tests/dummy/app/templates/components/issue-detail-multi.hbs b/tests/dummy/app/templates/components/issue-detail-multi.hbs
new file mode 100644
index 0000000..3b72110
--- /dev/null
+++ b/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"
+}}
diff --git a/tests/dummy/app/templates/components/issue-detail.hbs b/tests/dummy/app/templates/components/issue-detail.hbs
new file mode 100644
index 0000000..e08add8
--- /dev/null
+++ b/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"
+}}
diff --git a/tests/integration/components/issue-detail-test.js b/tests/integration/components/issue-detail-test.js
new file mode 100644
index 0000000..e75f141
--- /dev/null
+++ b/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);
+});