mirror of
https://github.com/tenrok/vue-select.git
synced 2026-06-13 08:32:26 +03:00
Add option to allow closing a multi-select when a value is selected
This commit is contained in:
@@ -34,6 +34,7 @@
|
||||
<v-select placeholder="multiple" multiple :options="options"></v-select>
|
||||
<v-select placeholder="multiple, taggable" multiple taggable :options="options" no-drop></v-select>
|
||||
<v-select placeholder="multiple, taggable, push-tags" multiple push-tags taggable :options="[{label: 'Foo', value: 'foo'}]"></v-select>
|
||||
<v-select placeholder="multiple, closeOnSelect" multiple :close-on-multi-select="true" :options="['cat', 'dog', 'bear']"></v-select>
|
||||
<v-select placeholder="unsearchable" :options="options" :searchable="false"></v-select>
|
||||
<v-select placeholder="search github.." label="full_name" @search="search" :options="ajaxRes"></v-select>
|
||||
</div>
|
||||
|
||||
@@ -390,6 +390,16 @@
|
||||
default: true
|
||||
},
|
||||
|
||||
/**
|
||||
* Allows user to choose to close the select dropdown when an option is selected.
|
||||
* set to true when multiple=true to close the dropdown between each selection
|
||||
* @type {Boolean}
|
||||
*/
|
||||
closeOnMultiSelect: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
|
||||
/**
|
||||
* Tells vue-select what key to use when generating option
|
||||
* labels when each `option` is an object.
|
||||
@@ -625,7 +635,12 @@
|
||||
* @return {void}
|
||||
*/
|
||||
onAfterSelect(option) {
|
||||
if (!this.multiple) {
|
||||
if (this.multiple) {
|
||||
if (this.closeOnMultiSelect) {
|
||||
this.open = !this.open
|
||||
this.$refs.search.blur()
|
||||
}
|
||||
} else {
|
||||
this.open = !this.open
|
||||
this.$refs.search.blur()
|
||||
}
|
||||
|
||||
@@ -351,6 +351,26 @@ describe('Select.vue', () => {
|
||||
})
|
||||
})
|
||||
|
||||
it('can close the dropdown when the el is clicked, multiple is true, and multipleCloseOnSelect option is true', (done) => {
|
||||
const vm = new Vue({
|
||||
template: '<div><v-select ref="select" :options="options" multiple closeOnMultiSelect :value="value"></v-select></div>',
|
||||
components: {vSelect},
|
||||
data: {
|
||||
value: [],
|
||||
options: ['one', 'two', 'three']
|
||||
}
|
||||
}).$mount()
|
||||
|
||||
vm.$children[0].open = true
|
||||
vm.$refs.select.select('one')
|
||||
|
||||
Vue.nextTick(() => {
|
||||
expect(vm.$children[0].open).toEqual(false)
|
||||
done()
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
it('should close the dropdown on search blur', () => {
|
||||
const vm = new Vue({
|
||||
template: '<div><v-select :options="options" multiple :value="value"></v-select></div>',
|
||||
|
||||
Reference in New Issue
Block a user