diff --git a/addon/components/validated-input/types/checkbox-group.js b/addon/components/validated-input/types/checkbox-group.js index 2ed135e1..6eebd9ed 100644 --- 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 index dfe8ee07..b926d9a3 100644 --- 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` + + `); + + 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", [ {