Fix <sl-checkbox-group> value not reflecting initial checked state (

#1421)
sl-design-system · Jul 17, 2024 · 5051056 · 5051056
1 parent 047889e
commit 5051056
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 10 deletions.
diff --git a/.changeset/dull-lemons-sit.md b/.changeset/dull-lemons-sit.md
@@ -0,0 +1,5 @@
+---
+'@sl-design-system/checkbox': patch
+---
+
+Fix group value not reflecting initial checked state
diff --git a/packages/components/checkbox/src/checkbox-group.spec.ts b/packages/components/checkbox/src/checkbox-group.spec.ts
@@ -20,10 +20,6 @@ describe('sl-checkbox-group', () => {
       `);
     });
 
-    it('should render correctly', () => {
-      expect(el).shadowDom.to.equalSnapshot();
-    });
-
     it('should not be disabled', () => {
       expect(el.disabled).to.not.be.true;
       expect(el).not.to.have.attribute('disabled');
@@ -259,6 +255,24 @@ describe('sl-checkbox-group', () => {
     });
   });
 
+  describe('implicit value', () => {
+    let el: CheckboxGroup;
+
+    beforeEach(async () => {
+      el = await fixture(html`
+        <sl-checkbox-group>
+          <sl-checkbox checked value="0">Option 1</sl-checkbox>
+          <sl-checkbox checked value="1">Option 2</sl-checkbox>
+          <sl-checkbox value="2">Option 3</sl-checkbox>
+        </sl-checkbox-group>
+      `);
+    });
+
+    it('should have a value of the checked boxes', () => {
+      expect(el.value).to.deep.equal(['0', '1', null]);
+    });
+  });
+
   describe('without values', () => {
     let el: CheckboxGroup;
 

diff --git a/packages/components/checkbox/src/checkbox-group.stories.ts b/packages/components/checkbox/src/checkbox-group.stories.ts
@@ -91,6 +91,18 @@ export const Value: Story = {
   }
 };
 
+export const ImplicitValue: Story = {
+  args: {
+    slot: () => html`
+      <sl-checkbox-group>
+        <sl-checkbox checked value="0">Option 1</sl-checkbox>
+        <sl-checkbox checked value="1">Option 2</sl-checkbox>
+        <sl-checkbox value="2">Option 3</sl-checkbox>
+      </sl-checkbox-group>
+    `
+  }
+};
+
 export const WithoutValues: Story = {
   args: {
     boxes: () => html`

diff --git a/packages/components/checkbox/src/checkbox-group.ts b/packages/components/checkbox/src/checkbox-group.ts
@@ -140,7 +140,7 @@ export class CheckboxGroup<T = unknown> extends FormControlMixin(LitElement) {
   override render(): TemplateResult {
     return html`
       <slot
-        @slotchange=${this.#onSlotchange}
+        @slotchange=${this.#onSlotChange}
         @sl-blur=${this.#stopEvent}
         @sl-change=${this.#stopEvent}
         @sl-focus=${this.#stopEvent}
@@ -182,17 +182,20 @@ export class CheckboxGroup<T = unknown> extends FormControlMixin(LitElement) {
     event.stopPropagation();
   }
 
-  #onSlotchange(): void {
+  #onSlotChange(): void {
     this.#rovingTabindexController.clearElementCache();
 
     this.#observer.disconnect();
 
     this.boxes?.forEach((box, index) => {
       box.name = this.name;
-      if (box.value !== undefined) {
-        box.checked = this.value?.includes(box.value) ?? false;
-      } else {
-        box.formValue = this.value?.at(index) ?? null;
+
+      if (this.value !== undefined) {
+        if (box.value !== undefined) {
+          box.checked = this.value?.includes(box.value) ?? false;
+        } else {
+          box.formValue = this.value?.at(index) ?? null;
+        }
       }
 
       if (typeof this.disabled === 'boolean') {