Merge branch 'kball-add-select-on-tab-option'

Jeff · Jeff · commit e8e5eff55375 · 2018-08-07T21:16:44.000-07:00
# Conflicts:
#	src/components/Select.vue
diff --git a/dev/dev.html b/dev/dev.html
@@ -9,7 +9,7 @@
     <!--<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">-->
     <!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css">-->
     <style>
-        
+
         #app {
             height: 95vh;
             display: flex;
@@ -67,7 +67,7 @@
               </button>
             </span>
         </v-select>
-
+        <v-select placeholder="select on tab" :select-on-tab="true" :options="options"></v-select>
         <v-select placeholder="disabled" disabled  value="disabled"></v-select>
         <v-select placeholder="disabled multiple" disabled multiple :value="['disabled', 'multiple']"></v-select>
         <v-select placeholder="filterable=false, @search=searchPeople" label="first_name" :filterable="false" @search="searchPeople" :options="people"></v-select>
diff --git a/src/components/Select.vue b/src/components/Select.vue
@@ -339,6 +339,7 @@
                 @keydown.up.prevent="typeAheadUp"
                 @keydown.down.prevent="typeAheadDown"
                 @keydown.enter.prevent="typeAheadSelect"
+                @keydown.tab="onTab"
                 @blur="onSearchBlur"
                 @focus="onSearchFocus"
                 type="search"
@@ -578,6 +579,18 @@
         }
       },
 
+      /**
+       * Select the current value if selectOnTab is enabled
+       */
+      onTab: {
+        type: Function,
+        default: function () {
+          if (this.selectOnTab) {
+            this.typeAheadSelect();
+          }
+        },
+      },
+
       /**
        * Enable/disable creating options from searchInput.
        * @type {Boolean}
@@ -710,6 +723,14 @@
         type: String,
         default: 'auto'
       },
+      /**
+       * When true, hitting the 'tab' key will select the current select value
+       * @type {Boolean}
+       */
+      selectOnTab: {
+        type: Boolean,
+        default: false
+      }
     },
 
     data() {
diff --git a/test/unit/specs/Select.spec.js b/test/unit/specs/Select.spec.js
@@ -109,6 +109,22 @@ describe('Select.vue', () => {
 			expect(vm.$children[0].mutableValue).toEqual(vm.value)
 		})
 
+    it('can select an option on tab', (done) => {
+      const vm = new Vue({
+        template: `<div><v-select :options="['one','two']" select-on-tab></v-select></div>`,
+        components: {vSelect},
+      }).$mount()
+
+      vm.$children[0].typeAheadPointer = 0
+
+      trigger(vm.$children[0].$refs.search, 'keydown', (e) => e.keyCode = 9)
+
+      Vue.nextTick(() => {
+        expect(vm.$children[0].mutableValue).toEqual('one');
+        done();
+      })
+    })
+
 		it('can deselect a pre-selected object', () => {
 			const vm = new Vue({
 				template: '<div><v-select :options="options" :value="value" :multiple="true"></v-select></div>',
