fix(form): fix wrong updating of the answer value

Author: Jonas Metzener

addon/components/cf-field.js

@@ -33,13 +33,13 @@ export default Component.extend({
       "config:environment"
     );
 
-    this.set("field.answer.value", value);
-
     /* istanbul ignore next */
     if (environment !== "test") {
       yield timeout(500);
     }
 
+    this.set("field.answer.value", value);
+
     yield this.field.validate.perform();
 
     try {

addon/components/cf-field/input/checkbox.js

@@ -1,5 +1,4 @@
 import Component from "@ember/component";
-import { get } from "@ember/object";
 import layout from "../../../templates/components/cf-field/input/checkbox";
 import { computed } from "@ember/object";
 
@@ -11,7 +10,6 @@ import { computed } from "@ember/object";
  */
 export default Component.extend({
   layout,
-  tagName: "",
 
   choices: computed(
     "field.question.{multipleChoiceOptions,dynamicMultipleChoiceOptions}.edges",
@@ -25,18 +23,17 @@ export default Component.extend({
 
   actions: {
     /**
-     * Toggle the checked state of an option and trigger saving the field.
+     * Update the value of the field with the slugs of the currently checked
+     * boxes.
      *
-     * @method toggle
-     * @param {String} slug The slug of the changed option
-     * @param {Boolean} checked Whether the options checkbox is checked or not
+     * @method update
      */
-    toggle(slug, checked) {
-      const value = get(this, "field.answer.value") || [];
+    update() {
+      const checkedBoxes = [
+        ...this.element.querySelectorAll("input[type=checkbox]:checked")
+      ];
 
-      this.onSave([
-        ...new Set([...value, slug].filter(v => v !== slug || checked))
-      ]);
+      this.onSave([...new Set(checkedBoxes.map(el => el.value))]);
     }
   }
 });

addon/templates/components/cf-field/input/checkbox.hbs

@@ -9,7 +9,7 @@
         value={{option.slug}}
         checked={{contains option.slug field.answer.value}}
         disabled={{disabled}}
-        onchange={{action (action "toggle" option.slug) value="target.checked"}}
+        onchange={{action "update"}}
       >
       {{option.label}}
     </label>