fix(form): fix fast selection in checkboxes

This fixes an issue where the value of a checkbox question was not
properly updated to the answer model and therefore the backend. This
happened because the save task uses a timeout to debounce value saving.
As the update function of the component always used the value from the
user model this caused a race condition if the user clicked the options
too fast.

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

@@ -1,5 +1,6 @@
 import { action } from "@ember/object";
 import Component from "@glimmer/component";
+import { tracked } from "@glimmer/tracking";
 
 /**
  * Input component for the checkbox question type
@@ -8,6 +9,8 @@ import Component from "@glimmer/component";
  * @argument {Field} field The field for this input type
  */
 export default class CfFieldInputCheckboxComponent extends Component {
+  @tracked selected = this.args.field.value;
+
   /**
    * Update the value of the field with the slugs of the currently checked
    * boxes.
@@ -16,14 +19,15 @@ export default class CfFieldInputCheckboxComponent extends Component {
    */
   @action
   update({ target: { value, checked } }) {
-    const valueSet = new Set(this.args.field.value);
+    const valueSet = new Set(this.selected);
 
     if (checked) {
       valueSet.add(value);
     } else {
       valueSet.delete(value);
     }
 
-    this.args.onSave([...valueSet]);
+    this.selected = [...valueSet];
+    this.args.onSave(this.selected);
   }
 }

packages/form/tests/integration/components/cf-field/input/checkbox-test.js

@@ -1,6 +1,7 @@
 import { render, click, settled } from "@ember/test-helpers";
 import { tracked } from "@glimmer/tracking";
 import { hbs } from "ember-cli-htmlbars";
+import { timeout } from "ember-concurrency";
 import { setupIntl } from "ember-intl/test-support";
 import { module, test } from "qunit";
 
@@ -154,4 +155,32 @@ module("Integration | Component | cf-field/input/checkbox", function (hooks) {
     assert.dom("label input[type=checkbox]").isDisabled();
     assert.dom("label del.uk-text-muted").doesNotExist();
   });
+
+  test("it handles fast selections correctly", async function (assert) {
+    assert.expect(1);
+
+    this.field = new (class {
+      @tracked value = [];
+      options = [
+        { slug: "option-1", label: "Option 1" },
+        { slug: "option-2", label: "Option 2" },
+      ];
+    })();
+
+    this.save = async (value) => {
+      await timeout(50);
+      this.field.value = value;
+      await settled();
+    };
+
+    await render(
+      hbs`<CfField::Input::Checkbox @onSave={{this.save}} @field={{this.field}} />`,
+    );
+
+    // explicitly don't await the first click to trigger two concurrently
+    // running save tasks
+    click("label:nth-of-type(1) input");
+    await click("label:nth-of-type(2) input");
+    assert.deepEqual(this.field.value, ["option-1", "option-2"]);
+  });
 });