Add select on tab option and example

kball · kball · commit d2efc965f936 · 2018-06-05T15:47:52.000-07:00
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;
@@ -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
@@ -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.
