Add autofocus prop to UiTextbox and UiAutocomplete

ykunimoto · Jul 4, 2016 · 85125a2 · 85125a2
1 parent 1f4cfbf
commit 85125a2
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 1 deletion.
diff --git a/src/UiAutocomplete.vue b/src/UiAutocomplete.vue
@@ -21,7 +21,7 @@
 
                 <input
                     class="ui-autocomplete-input" :placeholder="placeholder" :name="name"
-                    :id="id" autocomplete="off"
+                    :id="id" autocomplete="off" v-autofocus="autofocus"
 
                     @focus="focus" @blur="blur" @keydown.up="highlight(highlightedItem - 1)"
                     @keydown.down="highlight(highlightedItem + 1)" @keydown.tab="close"
@@ -61,6 +61,7 @@ import fuzzysearch from 'fuzzysearch';
 import UiIcon from './UiIcon.vue';
 import UiAutocompleteSuggestion from './UiAutocompleteSuggestion.vue';
 
+import autofocus from '../directives/autofocus';
 import HasTextInput from './mixins/HasTextInput';
 import ValidatesInput from './mixins/ValidatesInput';
 
@@ -92,6 +93,10 @@ export default {
         showOnUpDown: {
             type: Boolean,
             default: true
+        },
+        autofocus: {
+            type: Boolean,
+            default: false
         }
     },
 
@@ -229,6 +234,10 @@ export default {
         UiAutocompleteSuggestion
     },
 
+    directives: {
+        autofocus
+    },
+
     mixins: [
         HasTextInput,
         ValidatesInput

diff --git a/src/UiTextbox.vue b/src/UiTextbox.vue
@@ -19,6 +19,7 @@
                     class="ui-textbox-input" :type="type" :placeholder="placeholder" :name="name"
                     :id="id" :number="type === 'number' ? true : null" :min="minValue"
                     :max="maxValue" :step="stepValue" :autocomplete="autocomplete"
+                    v-autofocus="autofocus"
 
                     @focus="focussed" @blur="blurred" @change="changed" @keydown="keydown"
                     @keydown.enter="keydownEnter" debounce="debounce"
@@ -60,6 +61,7 @@
 <script>
 import UiIcon from './UiIcon.vue';
 
+import autofocus from '../directives/autofocus';
 import HasTextInput from './mixins/HasTextInput';
 import ValidatesInput from './mixins/ValidatesInput';
 
@@ -92,6 +94,10 @@ export default {
             type: String,
             default: 'off'
         },
+        autofocus: {
+            type: Boolean,
+            default: false
+        },
         min: Number,
         max: Number,
         step: {
@@ -240,6 +246,10 @@ export default {
         UiIcon
     },
 
+    directives: {
+        autofocus
+    },
+
     mixins: [
         HasTextInput,
         ValidatesInput

diff --git a/src/directives/autofocus.js b/src/directives/autofocus.js
@@ -0,0 +1,3 @@
+export default function(value) {
+    this.el.autofocus = Boolean(value);
+}