fix: do not throw when setting checkbox-group value to null (#7933) (#…

…7934)

Co-authored-by: Serhii Kulykov <iamkulykov@gmail.com>

packages/checkbox-group/src/vaadin-checkbox-group-mixin.js

@@ -118,7 +118,7 @@ export const CheckboxGroupMixin = (superclass) =>
  * @return {boolean}
  */
  checkValidity() {
- return !this.required || this.value.length > 0;
+ return !this.required || Boolean(this.value && this.value.length > 0);
  }
 
  /**
@@ -165,7 +165,7 @@ export const CheckboxGroupMixin = (superclass) =>
 
  if (checkbox.checked) {
  this.__addCheckboxToValue(checkbox.value);
- } else if (this.value.includes(checkbox.value)) {
+ } else if (this.value && this.value.includes(checkbox.value)) {
  checkbox.checked = true;
  }
  }
@@ -215,7 +215,9 @@ export const CheckboxGroupMixin = (superclass) =>
  * @private
  */
  __addCheckboxToValue(value) {
- if (!this.value.includes(value)) {
+ if (!this.value) {
+ this.value = [value];
+ } else if (!this.value.includes(value)) {
  this.value = [...this.value, value];
  }
  }
@@ -225,7 +227,7 @@ export const CheckboxGroupMixin = (superclass) =>
  * @private
  */
  __removeCheckboxFromValue(value) {
- if (this.value.includes(value)) {
+ if (this.value && this.value.includes(value)) {
  this.value = this.value.filter((v) => v !== value);
  }
  }
@@ -245,20 +247,20 @@ export const CheckboxGroupMixin = (superclass) =>
  }
 
  /**
- * @param {string | null | undefined} value
- * @param {string | null | undefined} oldValue
+ * @param {string[] | null | undefined} value
+ * @param {string[] | null | undefined} oldValue
  * @private
  */
  __valueChanged(value, oldValue) {
  // Setting initial value to empty array, skip validation
- if (value.length === 0 && oldValue === undefined) {
+ if (value && value.length === 0 && oldValue === undefined) {
  return;
  }
 
- this.toggleAttribute('has-value', value.length > 0);
+ this.toggleAttribute('has-value', value && value.length > 0);
 
  this.__checkboxes.forEach((checkbox) => {
- checkbox.checked = value.includes(checkbox.value);
+ checkbox.checked = value && value.includes(checkbox.value);
  });
 
  if (oldValue !== undefined) {

packages/checkbox-group/test/checkbox-group.common.js

@@ -141,6 +141,25 @@ describe('vaadin-checkbox-group', () => {
  expect(group.value).to.include('new');
  });
 
+ it('should add dynamically added checked checkbox value when group value is null', async () => {
+ group.value = null;
+ const checkbox = document.createElement('vaadin-checkbox');
+ checkbox.value = 'new';
+ checkbox.checked = true;
+ group.appendChild(checkbox);
+ await nextFrame();
+ expect(group.value).to.eql(['new']);
+ });
+
+ it('should ignore dynamically added unchecked checkbox value when group value is null', async () => {
+ group.value = null;
+ const checkbox = document.createElement('vaadin-checkbox');
+ checkbox.value = 'new';
+ group.appendChild(checkbox);
+ await nextFrame();
+ expect(group.value).to.be.null;
+ });
+
  it('should not add duplicate values when added checked checkbox already included in value', async () => {
  const checkbox = document.createElement('vaadin-checkbox');
  checkbox.value = 'new';

packages/checkbox-group/test/validation.common.js

@@ -160,6 +160,11 @@ describe('validation', () => {
  expect(group.checkValidity()).to.be.true;
  });
 
+ it('should fail validation when value set to null', () => {
+ group.value = null;
+ expect(group.checkValidity()).to.be.false;
+ });
+
  it('should be valid after selecting a checkbox', async () => {
  checkboxes[0].click();
  await nextUpdate(group);