Merge pull request sagalbot#172 from koriroys/master

sagalbot · web-flow · commit aabc43c903a8 · 2017-04-19T18:41:24.000-07:00
Add option to allow closing a multi-select when a value is selected
diff --git a/dev.html b/dev.html
@@ -34,6 +34,8 @@
         <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=true" multiple :options="['cat', 'dog', 'bear']"></v-select>
+        <v-select placeholder="multiple, closeOnSelect=false" multiple :close-on-select="false" :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>
diff --git 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
@@ -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
@@ -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: '<div><v-select ref="select" :options="options" multiple :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('does not close the dropdown when the el is clicked, multiple is true, and closeOnSelect option is false', (done) => {
+			const vm = new Vue({
+				template: '<div><v-select ref="select" :options="options" multiple :closeOnSelect="false" :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(true)
+				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>',
