diff --git a/dev.html b/dev.html index d0eafd0..5e9f51d 100644 --- a/dev.html +++ b/dev.html @@ -34,6 +34,8 @@ + + diff --git a/docs/components/Params.vue b/docs/components/Params.vue index 964db6c..60048f2 100644 --- a/docs/components/Params.vue +++ b/docs/components/Params.vue @@ -71,6 +71,16 @@ default: true }, + /** + * Close a dropdown when an option is chosen. Set to false to keep the dropdown + * open (useful when combined with multi-select, for example) + * @type {Boolean} + */ + closeOnSelect: { + type: Boolean, + default: true + }, + /** * Tells vue-select what key to use when generating option labels when * `option` is an object. diff --git a/src/components/Select.vue b/src/components/Select.vue index 56e35db..4d7ed22 100644 --- a/src/components/Select.vue +++ b/src/components/Select.vue @@ -390,6 +390,16 @@ default: true }, + /** + * Close a dropdown when an option is chosen. Set to false to keep the dropdown + * open (useful when combined with multi-select, for example) + * @type {Boolean} + */ + closeOnSelect: { + type: Boolean, + default: true + }, + /** * Tells vue-select what key to use when generating option * labels when each `option` is an object. @@ -625,7 +635,7 @@ * @return {void} */ onAfterSelect(option) { - if (!this.multiple) { + if (this.closeOnSelect) { this.open = !this.open this.$refs.search.blur() } diff --git a/test/unit/specs/Select.spec.js b/test/unit/specs/Select.spec.js index bd5cff4..ba98bf5 100644 --- a/test/unit/specs/Select.spec.js +++ b/test/unit/specs/Select.spec.js @@ -351,6 +351,46 @@ describe('Select.vue', () => { }) }) + + it('closes the dropdown when an option is selected, multiple is true, and closeOnSelect option is true', (done) => { + const vm = new Vue({ + template: '
', + 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('does not close the dropdown when the el is clicked, multiple is true, and closeOnSelect option is false', (done) => { + const vm = new Vue({ + template: '
', + 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(true) + done() + }) + }) + + it('should close the dropdown on search blur', () => { const vm = new Vue({ template: '
',