fix(sbb-radio-button-group, sbb-checkbox-group): group state update (#…

…2183)
sbb-design-systems · Nov 14, 2023 · 6199ec6 · 6199ec6
1 parent 72e5a4a
commit 6199ec6
Show file tree

Hide file tree

Showing 5 changed files with 96 additions and 24 deletions.
diff --git a/src/components/sbb-checkbox-group/sbb-checkbox-group.tsx b/src/components/sbb-checkbox-group/sbb-checkbox-group.tsx
@@ -64,6 +64,7 @@ export class SbbCheckboxGroup implements ComponentInterface {
 
   @Element() private _element!: HTMLElement;
 
+  private _componentLoaded = false;
   private _handlerRepository = new HandlerRepository(
     this._element,
     namedSlotChangeHandlerAspect((m) => (this._namedSlots = m(this._namedSlots))),
@@ -97,6 +98,12 @@ export class SbbCheckboxGroup implements ComponentInterface {
       !!this._element.querySelector('sbb-selection-panel'),
     );
     this._handlerRepository.connect();
+    this._updateCheckboxes();
+  }
+
+  public componentDidLoad(): void {
+    this._componentLoaded = true;
+    this._updateCheckboxes();
   }
 
   public disconnectedCallback(): void {
@@ -130,6 +137,10 @@ export class SbbCheckboxGroup implements ComponentInterface {
   }
 
   private _updateCheckboxes(): void {
+    if (!this._componentLoaded) {
+      return;
+    }
+
     const checkboxes = this._checkboxes;
 
     for (const checkbox of checkboxes) {

diff --git a/src/components/sbb-checkbox/sbb-checkbox.tsx b/src/components/sbb-checkbox/sbb-checkbox.tsx
@@ -177,7 +177,7 @@ export class SbbCheckbox implements ComponentInterface {
       !this._element.closest('sbb-selection-panel [slot="content"]');
     this._handlerRepository.connect();
     this._setupInitialStateAndAttributeObserver();
-    this._isSelectionPanelInput && this.sbbCheckboxLoaded.emit();
+    this.sbbCheckboxLoaded.emit();
   }
 
   public componentDidLoad(): void {

diff --git a/src/components/sbb-radio-button-group/sbb-radio-button-group.tsx b/src/components/sbb-radio-button-group/sbb-radio-button-group.tsx
@@ -161,6 +161,7 @@ export class SbbRadioButtonGroup implements ComponentInterface {
 
   public componentDidLoad(): void {
     this._componentLoaded = true;
+    this._updateRadios(this.value);
   }
 
   public disconnectedCallback(): void {
@@ -192,6 +193,10 @@ export class SbbRadioButtonGroup implements ComponentInterface {
   }
 
   private _updateRadios(initValue?: string): void {
+    if (!this._componentLoaded) {
+      return;
+    }
+
     this.value = initValue ?? this._radioButtons.find((radio) => radio.checked)?.value;
 
     for (const radio of this._radioButtons) {

diff --git a/src/components/sbb-radio-button/sbb-radio-button.tsx b/src/components/sbb-radio-button/sbb-radio-button.tsx
@@ -178,7 +178,7 @@ export class SbbRadioButton implements ComponentInterface {
       !!this._selectionPanelElement &&
       !this._element.closest('sbb-selection-panel [slot="content"]');
     this._setupInitialStateAndAttributeObserver();
-    this._isSelectionPanelInput && this.sbbRadioButtonLoaded.emit();
+    this.sbbRadioButtonLoaded.emit();
   }
 
   public componentDidLoad(): void {

diff --git a/src/components/sbb-selection-panel/sbb-selection-panel.e2e.ts b/src/components/sbb-selection-panel/sbb-selection-panel.e2e.ts
@@ -263,28 +263,28 @@ describe('sbb-selection-panel', () => {
     beforeEach(async () => {
       page = await newE2EPage();
       await page.setContent(`
-  <sbb-radio-button-group orientation="vertical" horizontal-from="large">
-    <sbb-selection-panel disable-animation>
-      <sbb-radio-button value="main1" checked="true">
-        Main Option 1
-      </sbb-radio-button>
-      <sbb-radio-button-group orientation="vertical" slot="content">
-        <sbb-radio-button value="sub1" checked>Suboption 1</sbb-radio-button>
-        <sbb-radio-button value="sub2">Suboption 2</sbb-radio-button>
-      </sbb-radio-button-group>
-    </sbb-selection-panel>
-
-    <sbb-selection-panel disable-animation>
-      <sbb-radio-button value="main2">
-        Main Option 2
-      </sbb-radio-button>
-      <sbb-radio-button-group orientation="vertical" slot="content">
-        <sbb-radio-button value="sub3">Suboption 3</sbb-radio-button>
-        <sbb-radio-button value="sub4">Suboption 4</sbb-radio-button>
-      </sbb-radio-button-group>
-    </sbb-selection-panel>
-  </sbb-radio-button-group>
-`);
+        <sbb-radio-button-group orientation="vertical" horizontal-from="large">
+          <sbb-selection-panel disable-animation>
+            <sbb-radio-button value="main1" checked="true">
+              Main Option 1
+            </sbb-radio-button>
+            <sbb-radio-button-group orientation="vertical" slot="content">
+              <sbb-radio-button value="sub1" checked>Suboption 1</sbb-radio-button>
+              <sbb-radio-button value="sub2">Suboption 2</sbb-radio-button>
+            </sbb-radio-button-group>
+          </sbb-selection-panel>
+
+          <sbb-selection-panel disable-animation>
+            <sbb-radio-button value="main2">
+              Main Option 2
+            </sbb-radio-button>
+            <sbb-radio-button-group orientation="vertical" slot="content">
+              <sbb-radio-button value="sub3">Suboption 3</sbb-radio-button>
+              <sbb-radio-button value="sub4">Suboption 4</sbb-radio-button>
+            </sbb-radio-button-group>
+          </sbb-selection-panel>
+        </sbb-radio-button-group>
+      `);
       element = await page.find('sbb-radio-button-group');
 
       await page.waitForChanges();
@@ -351,6 +351,62 @@ describe('sbb-selection-panel', () => {
     });
   });
 
+  describe('with template tag manipulation', () => {
+    beforeEach(async () => {
+      page = await newE2EPage();
+      await page.setContent(`
+        <template>
+          <sbb-selection-panel disable-animation>
+            <sbb-radio-button value="main1" checked="true">
+              Main Option 1
+            </sbb-radio-button>
+            <sbb-radio-button-group orientation="vertical" slot="content">
+              <sbb-radio-button value="sub1" checked>Suboption 1</sbb-radio-button>
+              <sbb-radio-button value="sub2">Suboption 2</sbb-radio-button>
+            </sbb-radio-button-group>
+          </sbb-selection-panel>
+
+          <sbb-selection-panel disable-animation>
+            <sbb-radio-button value="main2">
+              Main Option 2
+            </sbb-radio-button>
+            <sbb-radio-button-group orientation="vertical" slot="content">
+              <sbb-radio-button value="sub3">Suboption 3</sbb-radio-button>
+              <sbb-radio-button value="sub4">Suboption 4</sbb-radio-button>
+            </sbb-radio-button-group>
+          </sbb-selection-panel>
+        </template>
+
+        <sbb-radio-button-group value="main1"></sbb-radio-button-group>
+      `);
+      element = await page.find('sbb-radio-button-group');
+      await page.waitForChanges();
+    });
+
+    it('should initialize the group correctly after append', async () => {
+      await page.evaluate(() => {
+        const radioGroup = document.querySelector('sbb-radio-button-group');
+        const selectionPanels = Array.from(
+          document.querySelector('template').content.querySelectorAll('sbb-selection-panel'),
+        );
+
+        selectionPanels.forEach((el) => radioGroup.appendChild(el as HTMLElement));
+      });
+
+      const sub1 = await page.find("sbb-radio-button[value='sub1']");
+      const sub2 = await page.find("sbb-radio-button[value='sub2']");
+
+      expect(sub1).toHaveAttribute('checked');
+      expect(sub2).not.toHaveAttribute('checked');
+
+      await sub2.click();
+      await page.waitForChanges();
+
+      expect(sub1).not.toHaveAttribute('checked');
+      expect(sub2).toHaveAttribute('checked');
+    });
+  });
+
   describe('with checkboxes', () => {
     beforeEach(async () => {
       page = await newE2EPage();