From 6199ec6e732d9f18a7b573bcfea04ed6627aa79a Mon Sep 17 00:00:00 2001 From: Marco D'Auria <101181211+dauriamarco@users.noreply.github.com> Date: Tue, 14 Nov 2023 11:11:18 +0100 Subject: [PATCH] fix(sbb-radio-button-group, sbb-checkbox-group): group state update (#2183) --- .../sbb-checkbox-group/sbb-checkbox-group.tsx | 11 ++ src/components/sbb-checkbox/sbb-checkbox.tsx | 2 +- .../sbb-radio-button-group.tsx | 5 + .../sbb-radio-button/sbb-radio-button.tsx | 2 +- .../sbb-selection-panel.e2e.ts | 100 ++++++++++++++---- 5 files changed, 96 insertions(+), 24 deletions(-) diff --git a/src/components/sbb-checkbox-group/sbb-checkbox-group.tsx b/src/components/sbb-checkbox-group/sbb-checkbox-group.tsx index cdaf6f545c..4acd4063a5 100644 --- 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 index c390c69d19..515a94f95d 100644 --- 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 index f88128ae30..14f7b1294f 100644 --- 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 index 8f97400f84..9b9650fff3 100644 --- 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 index d5474db804..8b59296daa 100644 --- 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(` - - - - Main Option 1 - - - Suboption 1 - Suboption 2 - - - - - - Main Option 2 - - - Suboption 3 - Suboption 4 - - - -`); + + + + Main Option 1 + + + Suboption 1 + Suboption 2 + + + + + + Main Option 2 + + + Suboption 3 + Suboption 4 + + + + `); 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(` + + + + `); + 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();