From 2743bddf0c16b8f0042eaa10e6484d44dab28049 Mon Sep 17 00:00:00 2001
From: Montana <montana-ctr@friends.dds.mil>
Date: Fri, 4 Jan 2019 10:59:12 -0500
Subject: [PATCH] Bind other input value properly and clear it when checkbox is
 toggled

---
 js/components/multi_checkbox_input.js          | 4 +++-
 templates/components/multi_checkbox_input.html | 4 ++--
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/js/components/multi_checkbox_input.js b/js/components/multi_checkbox_input.js
index c23a068a..e548cba2 100644
--- a/js/components/multi_checkbox_input.js
+++ b/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 = ''
     }
   }
 }
diff --git a/templates/components/multi_checkbox_input.html b/templates/components/multi_checkbox_input.html
index 5c0b5e7a..2ca959fa 100644
--- a/templates/components/multi_checkbox_input.html
+++ b/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>