Refactor multi_checkbox_input

This component was made when having an "other" value as a check option
also meant typing in a custom value into an input field. Since this is no
longer needed, we were able to remove the markup / vue code for that
feature.

js/components/multi_checkbox_input.js

@@ -13,22 +13,14 @@ export default {
       type: Array,
       default: () => [],
     },
-    initialOtherValue: String,
     optional: Boolean,
   },
 
   data: function() {
-    const showError = (this.initialErrors && this.initialErrors.length) || false
     return {
-      showError: showError,
+      showError: this.initialErrors.length > 0,
-      showValid: !showError && this.initialValue.length > 0,
+      showValid: false,
       validationError: this.initialErrors.join(' '),
-      otherChecked: this.initialValue.includes('other')
-        ? true
-        : this.otherChecked,
-      otherText: this.initialValue.includes('other')
-        ? this.initialOtherValue
-        : '',
       selections: this.initialValue,
     }
   },
@@ -36,17 +28,15 @@ export default {
   methods: {
     onInput: function(e) {
       emitFieldChange(this)
-      this.showError = false
+      this.showError = !this.valid
-      this.showValid = true
+      this.showValid = !this.showError
-    },
+      this.validationError = 'This field is required.'
-    otherToggle: function() {
-      this.otherChecked = !this.otherChecked
     },
   },
 
   computed: {
     valid: function() {
-      return this.optional || this.showValid
+      return this.optional || this.selections.length > 0
     },
   },
 }

templates/components/multi_checkbox_input.html

@@ -45,19 +45,8 @@
         <ul>
           {% for choice in field.choices %}
             <li>
-              {% if choice[0] != 'other' %}
               <input type='checkbox' name='{{ field.name }}' id='{{ field.name }}-{{ loop.index0 }}' value='{{ choice[0] }}' v-model="selections"/>
               <label for='{{ field.name }}-{{ loop.index0 }}'>{{ choice[1] | safe }}</label>
-              {% else %}
-                <input @click="otherToggle" type='checkbox' name='{{ field.name }}' id='{{ field.name }}-{{ loop.index0 }}' value='other' v-model="selections"/>
-                <label for='{{ field.name }}-{{ loop.index0 }}'>{{ choice[1] | safe }}</label>
-
-                {% if other_input_field %}
-                  <div v-show="otherChecked">
-                    <input type='text' name='{{ other_input_field.name}}' id='{{ field.name }}-other'  v-model:value="otherText" aria-expanded='false' />
-                  </div>
-                {% endif %}
-              {% endif %}
             </li>
           {% endfor %}
         </ul>