From 897b0d8fb2659aa95760d60625285c9b7a12b489 Mon Sep 17 00:00:00 2001 From: Kori Roys Date: Fri, 31 Mar 2017 15:10:24 +0200 Subject: [PATCH 1/4] Add option to allow closing a multi-select when a value is selected --- dev.html | 1 + src/components/Select.vue | 17 ++++++++++++++++- test/unit/specs/Select.spec.js | 20 ++++++++++++++++++++ 3 files changed, 37 insertions(+), 1 deletion(-) diff --git a/dev.html b/dev.html index d0eafd0..bc01d7a 100644 --- a/dev.html +++ b/dev.html @@ -34,6 +34,7 @@ + diff --git a/src/components/Select.vue b/src/components/Select.vue index 56e35db..ef65e60 100644 --- a/src/components/Select.vue +++ b/src/components/Select.vue @@ -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() } diff --git a/test/unit/specs/Select.spec.js b/test/unit/specs/Select.spec.js index bd5cff4..65f7421 100644 --- a/test/unit/specs/Select.spec.js +++ b/test/unit/specs/Select.spec.js @@ -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: '
', + 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: '
', From ecd76ce4dd583332f4e1d0d8ee7a22f3fd1d96c8 Mon Sep 17 00:00:00 2001 From: Kori Roys Date: Sat, 1 Apr 2017 12:07:19 +0200 Subject: [PATCH 2/4] improving name for should-dropdown-close option. adding test --- dev.html | 3 ++- src/components/Select.vue | 15 +++++---------- test/unit/specs/Select.spec.js | 24 ++++++++++++++++++++++-- 3 files changed, 29 insertions(+), 13 deletions(-) diff --git a/dev.html b/dev.html index bc01d7a..5e9f51d 100644 --- a/dev.html +++ b/dev.html @@ -34,7 +34,8 @@ - + + diff --git a/src/components/Select.vue b/src/components/Select.vue index ef65e60..5c3e4a5 100644 --- a/src/components/Select.vue +++ b/src/components/Select.vue @@ -391,13 +391,13 @@ }, /** - * 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 + * Close a dropdown when an option is select. Set to false to keep the dropdown + * open (useful when combined with multi-select, for example) * @type {Boolean} */ - closeOnMultiSelect: { + closeOnSelect: { type: Boolean, - default: false + default: true }, /** @@ -635,12 +635,7 @@ * @return {void} */ onAfterSelect(option) { - if (this.multiple) { - if (this.closeOnMultiSelect) { - this.open = !this.open - this.$refs.search.blur() - } - } else { + 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 65f7421..ba98bf5 100644 --- a/test/unit/specs/Select.spec.js +++ b/test/unit/specs/Select.spec.js @@ -351,9 +351,10 @@ describe('Select.vue', () => { }) }) - it('can close the dropdown when the el is clicked, multiple is true, and multipleCloseOnSelect option is true', (done) => { + + it('closes the dropdown when an option is selected, multiple is true, and closeOnSelect option is true', (done) => { const vm = new Vue({ - template: '
', + template: '
', components: {vSelect}, data: { value: [], @@ -370,6 +371,25 @@ describe('Select.vue', () => { }) }) + 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({ From 8d1c649cf08cbbde7f71dc7059e9be732fb1f017 Mon Sep 17 00:00:00 2001 From: Kori Roys Date: Sat, 1 Apr 2017 12:07:38 +0200 Subject: [PATCH 3/4] document closeOnSelect option --- docs/components/Params.vue | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/docs/components/Params.vue b/docs/components/Params.vue index 964db6c..1fbdfa6 100644 --- a/docs/components/Params.vue +++ b/docs/components/Params.vue @@ -71,6 +71,16 @@ default: true }, + /** + * Close a dropdown when an option is select. 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. From 68b67e3297fc7ffe23bc5f0c6cc46e4451997ef3 Mon Sep 17 00:00:00 2001 From: Kori Roys Date: Sat, 1 Apr 2017 12:10:01 +0200 Subject: [PATCH 4/4] improve description --- docs/components/Params.vue | 2 +- src/components/Select.vue | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/components/Params.vue b/docs/components/Params.vue index 1fbdfa6..60048f2 100644 --- a/docs/components/Params.vue +++ b/docs/components/Params.vue @@ -72,7 +72,7 @@ }, /** - * Close a dropdown when an option is select. Set to false to keep the dropdown + * 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} */ diff --git a/src/components/Select.vue b/src/components/Select.vue index 5c3e4a5..4d7ed22 100644 --- a/src/components/Select.vue +++ b/src/components/Select.vue @@ -391,7 +391,7 @@ }, /** - * Close a dropdown when an option is select. Set to false to keep the dropdown + * 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} */