Skip to content

Commit 283cb4f

Browse files
sagalbotsagalbot
authored
Merge pull request sagalbot#386 from alfatraining/add-prop-to-disable-option-filtering
Add prop to disable option filtering
2 parents f5d99a0 + cb709e0 commit 283cb4f

File tree

4 files changed

+94
-3
lines changed

4 files changed

+94
-3
lines changed

‎dist/vue-select.js

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/vue-select.js.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/components/Select.vue

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -520,6 +520,17 @@
520520
default: false
521521
},
522522
523+
/**
524+
* When true, existing options will be filtered
525+
* by the search text. Should not be used in conjunction
526+
* with taggable.
527+
* @type {Boolean}
528+
*/
529+
filterOptions: {
530+
type: Boolean,
531+
default: true
532+
},
533+
523534
/**
524535
* User defined function for adding Options
525536
* @type {Function}
@@ -904,6 +915,9 @@
904915
* @return {array}
905916
*/
906917
filteredOptions() {
918+
if (!this.filterOptions && !this.taggable) {
919+
return this.mutableOptions.slice()
920+
}
907921
let options = this.mutableOptions.filter((option) => {
908922
if (typeof option === 'object' && option.hasOwnProperty(this.label)) {
909923
return option[this.label].toLowerCase().indexOf(this.search.toLowerCase()) > -1

‎test/unit/specs/Select.spec.js

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -295,6 +295,15 @@ describe('Select.vue', () => {
295295
expect(vm.$refs.select.filteredOptions).toEqual(['bar','baz'])
296296
})
297297

298+
it('should not filter the array of strings if filterOptions is false', () => {
299+
const vm = new Vue({
300+
template: `<div><v-select ref="select" :filter-options="false" :options="['foo','bar','baz']" v-model="value"></v-select></div>`,
301+
data: {value: 'foo'}
302+
}).$mount()
303+
vm.$refs.select.search = 'ba'
304+
expect(vm.$refs.select.filteredOptions).toEqual(['foo','bar','baz'])
305+
})
306+
298307
it('should filter without case-sensitivity', () => {
299308
const vm = new Vue({
300309
template: `<div><v-select ref="select" :options="['Foo','Bar','Baz']" v-model="value"></v-select></div>`,
@@ -888,6 +897,21 @@ describe('Select.vue', () => {
888897
expect(vm.$children[0].mutableOptions).toEqual(['one', 'two', 'three'])
889898
})
890899

900+
it('should add a freshly created option/tag to the options list when pushTags is true and filterOptions is false', () => {
901+
const vm = new Vue({
902+
template: '<div><v-select :options="options" push-tags :value="value" :filter-options="false" :multiple="true" :taggable="true"></v-select></div>',
903+
components: {vSelect},
904+
data: {
905+
value: ['one'],
906+
options: ['one', 'two']
907+
}
908+
}).$mount()
909+
910+
searchSubmit(vm, 'three')
911+
expect(vm.$children[0].mutableOptions).toEqual(['one', 'two', 'three'])
912+
expect(vm.$children[0].filteredOptions).toEqual(['one', 'two', 'three'])
913+
})
914+
891915
it('wont add a freshly created option/tag to the options list when pushTags is false', () => {
892916
const vm = new Vue({
893917
template: '<div><v-select :options="options" :value="value" :multiple="true" :taggable="true"></v-select></div>',
@@ -902,6 +926,21 @@ describe('Select.vue', () => {
902926
expect(vm.$children[0].mutableOptions).toEqual(['one', 'two'])
903927
})
904928

929+
it('wont add a freshly created option/tag to the options list when pushTags is false and filterOptions is false', () => {
930+
const vm = new Vue({
931+
template: '<div><v-select :options="options" :value="value" :multiple="true" :filter-options="false" :taggable="true"></v-select></div>',
932+
components: {vSelect},
933+
data: {
934+
value: ['one'],
935+
options: ['one', 'two']
936+
}
937+
}).$mount()
938+
939+
searchSubmit(vm, 'three')
940+
expect(vm.$children[0].mutableOptions).toEqual(['one', 'two'])
941+
expect(vm.$children[0].filteredOptions).toEqual(['one', 'two'])
942+
})
943+
905944
it('should select an existing option if the search string matches a string from options', (done) => {
906945
let two = 'two'
907946
const vm = new Vue({
@@ -943,6 +982,28 @@ describe('Select.vue', () => {
943982
})
944983
})
945984

985+
it('should select an existing option if the search string matches an objects label from options when filter-options is false', (done) => {
986+
let two = {label: 'two'}
987+
const vm = new Vue({
988+
template: '<div><v-select :options="options" taggable :filter-options="false"></v-select></div>',
989+
data: {
990+
options: [{label: 'one'}, two]
991+
}
992+
}).$mount()
993+
994+
vm.$children[0].search = 'two'
995+
996+
Vue.nextTick(() => {
997+
searchSubmit(vm)
998+
// This needs to be wrapped in nextTick() twice so that filteredOptions can
999+
// calculate after setting the search text, and move the typeAheadPointer index to 0.
1000+
Vue.nextTick(() => {
1001+
expect(vm.$children[0].mutableValue.label).toBe(two.label)
1002+
done()
1003+
})
1004+
})
1005+
})
1006+
9461007
it('should not reset the selected value when the options property changes', (done) => {
9471008
const vm = new Vue({
9481009
template: '<div><v-select :options="options" :value="value" :multiple="true" taggable></v-select></div>',
@@ -959,6 +1020,22 @@ describe('Select.vue', () => {
9591020
})
9601021
})
9611022

1023+
it('should not reset the selected value when the options property changes when filterOptions is false', (done) => {
1024+
const vm = new Vue({
1025+
template: '<div><v-select :options="options" :value="value" :multiple="true" :filter-options="false" taggable></v-select></div>',
1026+
components: {vSelect},
1027+
data: {
1028+
value: [{label: 'one'}],
1029+
options: [{label: 'one'}]
1030+
}
1031+
}).$mount()
1032+
vm.$children[0].mutableOptions = [{label: 'two'}]
1033+
Vue.nextTick(() => {
1034+
expect(vm.$children[0].mutableValue).toEqual([{label: 'one'}])
1035+
done()
1036+
})
1037+
})
1038+
9621039
it('should not allow duplicate tags when using string options', (done) => {
9631040
const vm = new Vue({
9641041
template: `<div><v-select ref="select" taggable multiple></v-select></div>`,

0 commit comments

Comments
 (0)