From d2efc965f936344ae020912ad1a51967b7ebbb47 Mon Sep 17 00:00:00 2001
From: Kevin Ball <kmball11@gmail.com>
Date: Tue, 5 Jun 2018 15:47:52 -0700
Subject: [PATCH 1/2] Add select on tab option and example

---
 dev/dev.html              |  3 ++-
 src/components/Select.vue | 31 +++++++++++++++++++++++++------
 2 files changed, 27 insertions(+), 7 deletions(-)

diff --git a/dev/dev.html b/dev/dev.html
index fe481cb..c75ec22 100644
--- 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;
@@ -68,6 +68,7 @@
             </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
index a0e4ffa..b07da63 100644
--- a/src/components/Select.vue
+++ b/src/components/Select.vue
@@ -329,6 +329,7 @@
               v-model="search"
               @keydown.delete="maybeDeleteValue"
               @keyup.esc="onEscape"
+              @keydown.tab="onTab"
               @keydown.up.prevent="typeAheadUp"
               @keydown.down.prevent="typeAheadDown"
               @keydown.enter.prevent="typeAheadSelect"
@@ -346,13 +347,13 @@
               aria-label="Search for option"
       >
 
-      <button 
-        v-show="showClearButton" 
-        :disabled="disabled" 
+      <button
+        v-show="showClearButton"
+        :disabled="disabled"
         @click="clearSelection"
-        type="button" 
-        class="clear" 
-        title="Clear selection" 
+        type="button"
+        class="clear"
+        title="Clear selection"
       >
         <span aria-hidden="true">&times;</span>
       </button>
@@ -680,6 +681,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() {
@@ -918,6 +927,16 @@
         }
       },
 
+      /**
+       * Select the current value if selectOnTab is enabled
+       * @return {void}
+       */
+      onTab() {
+        if (this.selectOnTab) {
+          this.typeAheadSelect();
+        }
+      },
+
       /**
        * Determine if an option exists
        * within this.mutableOptions array.

From 237e946c1911fa37fe4d1e47ee656ac885f92ae4 Mon Sep 17 00:00:00 2001
From: Jeff <jeff.sagal@briteweb.com>
Date: Tue, 7 Aug 2018 21:13:34 -0700
Subject: [PATCH 2/2] Pull onTab up to prop, add test

---
 src/components/Select.vue      | 22 ++++++++++++----------
 test/unit/specs/Select.spec.js | 20 ++++++++++++++++++--
 2 files changed, 30 insertions(+), 12 deletions(-)

diff --git a/src/components/Select.vue b/src/components/Select.vue
index b07da63..80ccb9e 100644
--- a/src/components/Select.vue
+++ b/src/components/Select.vue
@@ -549,6 +549,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}
@@ -927,16 +939,6 @@
         }
       },
 
-      /**
-       * Select the current value if selectOnTab is enabled
-       * @return {void}
-       */
-      onTab() {
-        if (this.selectOnTab) {
-          this.typeAheadSelect();
-        }
-      },
-
       /**
        * Determine if an option exists
        * within this.mutableOptions array.
diff --git a/test/unit/specs/Select.spec.js b/test/unit/specs/Select.spec.js
index f67dcc5..38b0165 100644
--- 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>',
@@ -1377,7 +1393,7 @@ describe('Select.vue', () => {
 					value: 'foo'
 				}
 			}).$mount()
-			
+
 			expect(vm.mutableValue).toEqual('foo')
 			vm.$el.querySelector( 'button.clear' ).click()
 			expect(vm.mutableValue).toEqual(null)
@@ -1396,6 +1412,6 @@ describe('Select.vue', () => {
 			const buttonEl = vm.$el.querySelector( 'button.clear' )
 			expect(buttonEl.disabled).toEqual(true);
 		})
-	
+
 	});
 })