From 7dbd5dc02f7fbb81ac084d9efe4bce71e7962d80 Mon Sep 17 00:00:00 2001
From: Serhii Kulykov <iamkulykov@gmail.com>
Date: Fri, 4 Oct 2024 10:23:45 +0300
Subject: [PATCH] fix: do not throw when setting checkbox-group value to null
 (#7933)

---
 .../src/vaadin-checkbox-group-mixin.js        | 20 ++++++++++---------
 .../test/checkbox-group.common.js             | 19 ++++++++++++++++++
 .../checkbox-group/test/validation.common.js  |  5 +++++
 3 files changed, 35 insertions(+), 9 deletions(-)

diff --git a/packages/checkbox-group/src/vaadin-checkbox-group-mixin.js b/packages/checkbox-group/src/vaadin-checkbox-group-mixin.js
index ff8d1d996d..db70b40dc4 100644
--- a/packages/checkbox-group/src/vaadin-checkbox-group-mixin.js
+++ b/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) {
diff --git a/packages/checkbox-group/test/checkbox-group.common.js b/packages/checkbox-group/test/checkbox-group.common.js
index cbef7533fc..4676d46f34 100644
--- a/packages/checkbox-group/test/checkbox-group.common.js
+++ b/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';
diff --git a/packages/checkbox-group/test/validation.common.js b/packages/checkbox-group/test/validation.common.js
index 27e9f9aeab..11dce84da3 100644
--- a/packages/checkbox-group/test/validation.common.js
+++ b/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);