@propelinc/citrus-ui 0.3.6 → 0.3.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@propelinc/citrus-ui",
-  "version": "0.3.6",
+  "version": "0.3.7",
   "repository": {
     "type": "git",
     "url": "https://github.com/propelinc/citrus-ui"

package/src/components/CTextField.vue

@@ -2,6 +2,7 @@
   <form-field :data-test="dataTest" :field-id="id" :disabled="disabled" :label="label">
     <v-text-field
       :id="id"
+      ref="input"
       v-bind="$attrs"
       :data-test="`${dataTest}-input`"
       class="text-field__field"
@@ -22,8 +23,9 @@
         <slot name="append">
           <button
             v-if="hideable"
+            type="button"
             :data-test="`${dataTest}-hide-toggle`"
-            @click="toggleObscureInput"
+            @click="toggleHideInput"
           >
             <font-awesome-icon v-if="hideInput" :icon="faEye" />
             <font-awesome-icon v-else :icon="faEyeSlash" />
@@ -41,6 +43,8 @@ import { Component, Vue, Prop } from 'vue-property-decorator';
 
 import FormField from '@/components/helpers/FormField.vue';
 
+type VTextField = Vue & { focus: () => void };
+
 @Component({ name: 'CTextField', inheritAttrs: false, components: { FormField, FontAwesomeIcon } })
 export default class CTextField extends Vue {
   faEye = faEye;
@@ -70,12 +74,17 @@ export default class CTextField extends Vue {
     return this.hideInput && this.hideable ? 'password' : this.type;
   }
 
-  toggleObscureInput(): void {
+  toggleHideInput(): void {
     if (!this.hideable) {
       return;
     }
 
     this.hideInput = !this.hideInput;
+    this.$emit('click:hide', this.hideInput);
+  }
+
+  focus(): void {
+    (this.$refs.input as VTextField).focus();
   }
 }
 </script>