fix(checkbox-group): fix multiple selection in checkbox group

adfinis · Sep 20, 2022 · 6bb902b · 6bb902b
1 parent 1722144
commit 6bb902b
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 9 deletions.
diff --git a/addon/components/validated-input/types/checkbox-group.js b/addon/components/validated-input/types/checkbox-group.js
@@ -6,16 +6,11 @@ export default class CheckboxGroupComponent extends Component {
   onUpdate(key, event) {
     event.preventDefault();
 
-    const value = this.value || [];
-    const index = value.indexOf(key);
+    const value = new Set(this.args.value || []);
 
-    if (index > -1) {
-      value.splice(index, 1);
-    } else {
-      value.push(key);
-    }
+    value.delete(key) || value.add(key);
 
-    this.args.update(value);
+    this.args.update([...value]);
     this.args.setDirty();
   }
 }
diff --git a/tests/integration/components/validated-input/types/checkbox-group-test.js b/tests/integration/components/validated-input/types/checkbox-group-test.js
@@ -1,4 +1,4 @@
-import { render } from "@ember/test-helpers";
+import { click, render } from "@ember/test-helpers";
 import { setupRenderingTest } from "ember-qunit";
 import hbs from "htmlbars-inline-precompile";
 import { module } from "qunit";
@@ -30,6 +30,29 @@ module(
       assert.dom("input[type=checkbox]").exists({ count: 2 });
     });
 
+    testDefault("it can select multiple values", async function (assert) {
+      this.options = [
+        { key: 1, label: 1 },
+        { key: 2, label: 2 },
+      ];
+      this.value = [];
+
+      await render(hbs`
+        <ValidatedInput::Types::CheckboxGroup
+          @options={{this.options}}
+          @value={{this.value}}
+          @update={{fn (mut this.value)}}
+          @setDirty={{fn (mut this.dirty) true}}
+        />
+      `);
+
+      await click('input[value="1"]');
+      await click('input[value="2"]');
+
+      assert.deepEqual(this.value, [1, 2]);
+      assert.true(this.dirty);
+    });
+
     testUikit("it renders", async function (assert) {
       this.set("options", [
         {