Merge pull request #386 from alfatraining/add-prop-to-disable-option-filtering

Add prop to disable option filtering

src/components/Select.vue

@@ -520,6 +520,17 @@
         default: false
       },
 
+      /**
+       * When true, existing options will be filtered
+       * by the search text. Should not be used in conjunction
+       * with taggable.
+       * @type {Boolean}
+       */
+      filterOptions: {
+        type: Boolean,
+        default: true
+      },
+
       /**
        * User defined function for adding Options
        * @type {Function}
@@ -904,6 +915,9 @@
        * @return {array}
        */
       filteredOptions() {
+        if (!this.filterOptions && !this.taggable) {
+          return this.mutableOptions.slice()
+        }
         let options = this.mutableOptions.filter((option) => {
           if (typeof option === 'object' && option.hasOwnProperty(this.label)) {
             return option[this.label].toLowerCase().indexOf(this.search.toLowerCase()) > -1

test/unit/specs/Select.spec.js

@@ -295,6 +295,15 @@ describe('Select.vue', () => {
 			expect(vm.$refs.select.filteredOptions).toEqual(['bar','baz'])
 		})
 
+		it('should not filter the array of strings if filterOptions is false', () => {
+			const vm = new Vue({
+				template: `<div><v-select ref="select" :filter-options="false" :options="['foo','bar','baz']" v-model="value"></v-select></div>`,
+				data: {value: 'foo'}
+			}).$mount()
+			vm.$refs.select.search = 'ba'
+			expect(vm.$refs.select.filteredOptions).toEqual(['foo','bar','baz'])
+		})
+
 		it('should filter without case-sensitivity', () => {
 			const vm = new Vue({
 				template: `<div><v-select ref="select" :options="['Foo','Bar','Baz']" v-model="value"></v-select></div>`,
@@ -888,6 +897,21 @@ describe('Select.vue', () => {
 			expect(vm.$children[0].mutableOptions).toEqual(['one', 'two', 'three'])
 		})
 
+		it('should add a freshly created option/tag to the options list when pushTags is true and filterOptions is false', () => {
+			const vm = new Vue({
+				template: '<div><v-select :options="options" push-tags :value="value" :filter-options="false" :multiple="true" :taggable="true"></v-select></div>',
+				components: {vSelect},
+				data: {
+					value: ['one'],
+					options: ['one', 'two']
+				}
+			}).$mount()
+
+			searchSubmit(vm, 'three')
+			expect(vm.$children[0].mutableOptions).toEqual(['one', 'two', 'three'])
+			expect(vm.$children[0].filteredOptions).toEqual(['one', 'two', 'three'])
+		})
+
 		it('wont add a freshly created option/tag to the options list when pushTags is false', () => {
 			const vm = new Vue({
 				template: '<div><v-select :options="options" :value="value" :multiple="true" :taggable="true"></v-select></div>',
@@ -902,6 +926,21 @@ describe('Select.vue', () => {
 			expect(vm.$children[0].mutableOptions).toEqual(['one', 'two'])
 		})
 
+		it('wont add a freshly created option/tag to the options list when pushTags is false and filterOptions is false', () => {
+			const vm = new Vue({
+				template: '<div><v-select :options="options" :value="value" :multiple="true" :filter-options="false" :taggable="true"></v-select></div>',
+				components: {vSelect},
+				data: {
+					value: ['one'],
+					options: ['one', 'two']
+				}
+			}).$mount()
+
+			searchSubmit(vm, 'three')
+			expect(vm.$children[0].mutableOptions).toEqual(['one', 'two'])
+			expect(vm.$children[0].filteredOptions).toEqual(['one', 'two'])
+		})
+
 		it('should select an existing option if the search string matches a string from options', (done) => {
 			let two = 'two'
 			const vm = new Vue({
@@ -943,6 +982,28 @@ describe('Select.vue', () => {
 			})
 		})
 
+		it('should select an existing option if the search string matches an objects label from options when filter-options is false', (done) => {
+			let two = {label: 'two'}
+			const vm = new Vue({
+				template: '<div><v-select :options="options" taggable :filter-options="false"></v-select></div>',
+				data: {
+					options: [{label: 'one'}, two]
+				}
+			}).$mount()
+
+			vm.$children[0].search = 'two'
+
+			Vue.nextTick(() => {
+				searchSubmit(vm)
+				//	This needs to be wrapped in nextTick() twice so that filteredOptions can
+				//	calculate after setting the search text, and move the typeAheadPointer index to 0.
+				Vue.nextTick(() => {
+					expect(vm.$children[0].mutableValue.label).toBe(two.label)
+					done()
+				})
+			})
+		})
+
 		it('should not reset the selected value when the options property changes', (done) => {
 			const vm = new Vue({
 				template: '<div><v-select :options="options" :value="value" :multiple="true" taggable></v-select></div>',
@@ -959,6 +1020,22 @@ describe('Select.vue', () => {
 			})
 		})
 
+		it('should not reset the selected value when the options property changes when filterOptions is false', (done) => {
+			const vm = new Vue({
+				template: '<div><v-select :options="options" :value="value" :multiple="true" :filter-options="false" taggable></v-select></div>',
+				components: {vSelect},
+				data: {
+					value: [{label: 'one'}],
+					options: [{label: 'one'}]
+				}
+			}).$mount()
+			vm.$children[0].mutableOptions = [{label: 'two'}]
+			Vue.nextTick(() => {
+				expect(vm.$children[0].mutableValue).toEqual([{label: 'one'}])
+				done()
+			})
+		})
+
 		it('should not allow duplicate tags when using string options', (done) => {
 				const vm = new Vue({
 					template: `<div><v-select ref="select" taggable multiple></v-select></div>`,