manually track down options when deselecting instead of relying on ar…

…ray.$remove, fixes #74

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-select",
-  "version": "1.3.1",
+  "version": "1.3.2",
   "description": "A native Vue.js component that provides similar functionality to Select2 without the overhead of jQuery.",
   "author": "Jeff Sagal <sagalbot@gmail.com>",
   "private": false,

src/components/Select.vue

@@ -428,7 +428,9 @@
 			 * @return {void}
 			 */
 			select(option) {
-				if (!this.isOptionSelected(option)) {
+				if (this.isOptionSelected(option)) {
+					this.deselect(option)
+				} else {
 					if (this.taggable && !this.optionExists(option)) {
 						option = this.createOption(option)
 
@@ -446,15 +448,30 @@
 					} else {
 						this.value = option
 					}
-				} else {
-					if (this.multiple) {
-						this.value.$remove(option)
-					}
 				}
 
 				this.onAfterSelect(option)
 			},
 
+			/**
+			 * De-select a given option.
+			 * @param  {Object||String} option
+			 * @return {void}
+			 */
+			deselect(option) {
+				if (this.multiple) {
+					let ref = -1
+					this.value.forEach((val) => {
+						if (val === option || typeof val === 'object' && val[this.label] === option[this.label]) {
+							ref = val
+						}
+					})
+					this.value.$remove(ref)
+				} else {
+					this.value = null
+				}
+			},
+
 			/**
 			 * Called from this.select after each selection.
 			 * @param  {Object||String} option
@@ -496,7 +513,7 @@
 				if (this.multiple && this.value) {
 					let selected = false
 					this.value.forEach(opt => {
-						if (typeof opt === 'object' && opt[this.label] === option) {
+						if (typeof opt === 'object' && opt[this.label] === option[this.label]) {
 							selected = true
 						} else if (opt === option) {
 							selected = true

test/unit/specs/Select.spec.js

@@ -2,6 +2,7 @@
 
 import Vue from 'vue'
 import vSelect from 'src/components/Select.vue'
+// import vSelect from '../../../dist/vue-select'
 import pointerScroll from 'src/mixins/pointerScroll.js'
 
 Vue.component('v-select', vSelect)
@@ -94,6 +95,30 @@ describe('Select.vue', () => {
 			expect(vm.$children[0].value).toEqual(vm.value)
 		})
 
+		it('can deselect a pre-selected object', () => {
+			const vm = new Vue({
+				template: '<div><v-select :options="options" :value.sync="value" :multiple="true"></v-select></div>',
+				data: {
+					value: [{label: 'This is Foo', value: 'foo'}, {label: 'This is Bar', value: 'bar'}],
+					options: [{label: 'This is Foo', value: 'foo'}, {label: 'This is Bar', value: 'bar'}]
+				}
+			}).$mount()
+			vm.$children[0].select({label: 'This is Foo', value: 'foo'})
+			expect(vm.$children[0].value.length).toEqual(1)
+		})
+
+		it('can deselect a pre-selected string', () => {
+			const vm = new Vue({
+				template: '<div><v-select :options="options" :value.sync="value" :multiple="true"></v-select></div>',
+				data: {
+					value: ['foo', 'bar'],
+					options: ['foo','bar']
+				}
+			}).$mount()
+			vm.$children[0].select('foo')
+			expect(vm.$children[0].value.length).toEqual(1)
+		})
+
 		it('can determine if the value prop is empty', () => {
 			const vm = new Vue({
 				template: '<div><v-select :options="options" :value.sync="value"></v-select></div>',
@@ -171,7 +196,7 @@ describe('Select.vue', () => {
 				}
 			}).$mount()
 
-			expect(vm.$children[0].isOptionSelected('one')).toEqual(true)
+			expect(vm.$children[0].isOptionSelected({label: 'one'})).toEqual(true)
 		})
 
 		describe('onChange Callback', () => {