From db1dd062ee609c267c05da798be48ee0818a380a Mon Sep 17 00:00:00 2001
From: Andrew Croce <andrew+dds@promptworks.com>
Date: Fri, 10 Aug 2018 08:58:31 -0400
Subject: [PATCH] Fix input validations

---
 js/components/text_input.js          | 22 +++++++++++++++------
 templates/components/text_input.html | 29 +++++++++++++---------------
 2 files changed, 29 insertions(+), 22 deletions(-)

diff --git a/js/components/text_input.js b/js/components/text_input.js
index 8c6df423..a8aba8e2 100644
--- a/js/components/text_input.js
+++ b/js/components/text_input.js
@@ -14,27 +14,37 @@ export default {
       type: String,
       default: () => 'anything'
     },
-    setValue: {
+    initialValue: {
       type: String,
       default: () => ''
-    }
+    },
+    initialErrors: Array
   },
 
   data: function () {
     return {
-      showError: false,
+      showError: (this.initialErrors && this.initialErrors.length) || false,
       showValid: false,
       mask: inputValidations[this.validation].mask,
       pipe: inputValidations[this.validation].pipe || undefined,
       keepCharPositions: inputValidations[this.validation].keepCharPositions || false,
-      value: this.setValue
+      value: this.initialValue
+    }
+  },
+
+  computed:{
+    rawValue: function () {
+      return this._rawValue(this.value)
     }
   },
 
   mounted: function () {
-    if (this.value && this.mask) {
+    if (this.value) {
       this._checkIfValid({ value: this.value, invalidate: true })
-      this.value = conformToMask(this.value, this.mask).conformedValue
+
+      if (this.mask) {
+        this.value = conformToMask(this.value, this.mask).conformedValue
+      }
     }
   },
 
diff --git a/templates/components/text_input.html b/templates/components/text_input.html
index 4c52a634..9e2eb369 100644
--- a/templates/components/text_input.html
+++ b/templates/components/text_input.html
@@ -4,24 +4,22 @@
   <textinput
     name='{{ field.name }}'
     validation='{{ validation }}'
-    {% if field.data %}set-value='{{ field.data }}'{% endif %}
+    {% if field.data %}initial-value='{{ field.data }}'{% endif %}
+    {% if field.errors %}v-bind:initial-errors='{{ field.errors }}'{% endif %}
     inline-template>
 
     <div
-      v-bind:class="['usa-input {% if field.errors %}usa-input--error{% endif %} usa-input--validation--' + validation, { 'usa-input--error': showError, 'usa-input--success': showValid }]">
+      v-bind:class="['usa-input usa-input--validation--' + validation, { 'usa-input--error': showError, 'usa-input--success': showValid }]">
 
       <label for={{field.name}}>
-        {{ field.label }}
+        {{ field.label | striptags }}
+
         {% if field.description %}
           <span class='usa-input__help'>{{ field.description | safe }}</span>
         {% endif %}
 
-        {% if field.errors %}
-          {{ Icon('alert') }}
-        {% endif %}
-
-        <template v-if='showError'>{{ Icon('alert') }}</template>
-        <template v-if='showValid'>{{ Icon('ok') }}</template>
+        <span v-show='showError'>{{ Icon('alert') }}</span>
+        <span v-show='showValid'>{{ Icon('ok') }}</span>
 
       </label>
 
@@ -32,7 +30,6 @@
           v-on:change='onChange'
           v-bind:value='value'
           id='{{ field.name }}'
-          name='{{ field.name }}'
           ref='input'
           placeholder='{{ placeholder }}'>
         </textarea>
@@ -47,7 +44,6 @@
           v-bind:pipe='pipe'
           v-bind:keep-char-positions='keepCharPositions'
           id='{{ field.name }}'
-          name='{{ field.name }}'
           type='text'
           ref='input'
           placeholder='{{ placeholder }}'
@@ -56,11 +52,12 @@
 
       {% endif %}
 
-      {% if field.errors %}
-        {% for error in field.errors %}
-          <span class='usa-input__message'>{{ error }}</span>
-        {% endfor %}
-      {% endif %}
+      <input type='hidden' v-bind:value='rawValue' name='{{ field.name }}' />
+
+      <template v-if='showError'>
+        <span v-for='error in initialErrors' class='usa-input__message' v-html='error'></span>
+      </template>
+
     </div>
 </textinput>
 {%- endmacro %}