Bind other input value properly and clear it when checkbox is toggled

js/components/multi_checkbox_input.js

@@ -31,7 +31,8 @@ export default {
       showError: showError,
       showValid: !showError && !!this.initialValue,
       validationError: this.initialErrors.join(' '),
-      otherChecked: this.initialValue.includes("other") ? true : this.otherChecked
+      otherChecked: this.initialValue.includes("other") ? true : this.otherChecked,
+      otherText: this.initialOtherValue
     }
   },
 
@@ -54,6 +55,7 @@ export default {
     },
     otherToggle: function() {
       this.otherChecked = !this.otherChecked
+      this.otherText = ''
     }
   }
 }

templates/components/multi_checkbox_input.html

@@ -7,7 +7,7 @@
     inline-template
     {% if field.errors %}v-bind:initial-errors='{{ field.errors | list }}'{% endif %}
     {% if field.data and field.data != "None" %}v-bind:initial-value="{{ field.data }}"{% endif %}
-    {% if other_input_field.data and other_input_field.data != "None" %}v-bind:initial-other-value="{{ other_input_field.data }}"{% endif %}
+    {% if other_input_field.data and other_input_field.data != "None" %}initial-other-value="{{ other_input_field.data }}"{% endif %}
     key='{{ field.name }}'>
     <div
       v-bind:class="['usa-input', { 'usa-input--error': showError, 'usa-input--success': showValid }]">
@@ -38,7 +38,7 @@
                 <label for='{{ field.name }}-{{ field.choices.index(choice) }}'>{{ choice[1] }}</label>
 
                 <div v-show="otherChecked">
-                  <input type='text' name='{{ field.name}}_other' id='{{ field.name }}-other' value="{{ other_input_field.data }}" aria-expanded='false' />
+                  <input type='text' name='{{ field.name}}_other' id='{{ field.name }}-other'  v-bind:value="otherText" aria-expanded='false' />
                 </div>
               {% endif %}
             </li>