From 6a0dc1d13edfb1dcc0f5af68dbbe7d7157792c5e Mon Sep 17 00:00:00 2001 From: Marco D'Auria Date: Wed, 1 Nov 2023 10:19:29 +0100 Subject: [PATCH 1/7] fix: selection panel state update --- src/components.d.ts | 4 ++++ .../sbb-radio-button-group/sbb-radio-button-group.tsx | 9 ++++++--- src/components/sbb-radio-button/readme.md | 1 + .../sbb-radio-button/sbb-radio-button.events.ts | 1 + src/components/sbb-radio-button/sbb-radio-button.tsx | 10 ++++++++++ .../sbb-selection-panel/sbb-selection-panel.tsx | 3 ++- 6 files changed, 24 insertions(+), 4 deletions(-) diff --git a/src/components.d.ts b/src/components.d.ts index 30ddd1a038..ba11e3d9a5 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -4176,6 +4176,10 @@ declare namespace LocalJSX { * Whether the radio button is disabled. */ "disabled"?: boolean; + /** + * Internal event that emits when the input element is loaded. + */ + "onInput-loaded"?: (event: SbbRadioButtonCustomEvent) => void; /** * Internal event that emits whenever the state of the radio option in relation to the parent selection panel changes. */ 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 44686dbc8d..1ef97011ec 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 @@ -164,7 +164,10 @@ export class SbbRadioButtonGroup implements ComponentInterface { @Listen('state-change', { passive: true }) public onRadioButtonSelect(event: CustomEvent): void { event.stopPropagation(); - if (event.detail.type !== 'checked') { + if ( + event.detail.type !== 'checked' || + !(event.target as HTMLElement).parentElement.dataset.state + ) { return; } @@ -186,10 +189,10 @@ export class SbbRadioButtonGroup implements ComponentInterface { } private _updateRadios(): void { - const value = this.value ?? this._radioButtons.find((radio) => radio.checked)?.value; + this.value = this._radioButtons.find((radio) => radio.checked)?.value; for (const radio of this._radioButtons) { - radio.checked = radio.value === value; + radio.checked = radio.value === this.value; radio.size = this.size; radio.allowEmptySelection = this.allowEmptySelection; diff --git a/src/components/sbb-radio-button/readme.md b/src/components/sbb-radio-button/readme.md index 777e329f96..b41ea8ad73 100644 --- a/src/components/sbb-radio-button/readme.md +++ b/src/components/sbb-radio-button/readme.md @@ -58,6 +58,7 @@ The component has two different sizes, which can be changed using the `size` pro | Event | Description | Type | | -------------- | ------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------ | +| `input-loaded` | Internal event that emits when the input element is loaded. | `CustomEvent` | | `state-change` | Internal event that emits whenever the state of the radio option in relation to the parent selection panel changes. | `CustomEvent` | diff --git a/src/components/sbb-radio-button/sbb-radio-button.events.ts b/src/components/sbb-radio-button/sbb-radio-button.events.ts index 4120dce5be..3ef983a72e 100644 --- a/src/components/sbb-radio-button/sbb-radio-button.events.ts +++ b/src/components/sbb-radio-button/sbb-radio-button.events.ts @@ -3,5 +3,6 @@ * See stencil.config.ts in the root directory. */ export default { + inputLoaded: 'input-loaded', stateChange: 'state-change', }; diff --git a/src/components/sbb-radio-button/sbb-radio-button.tsx b/src/components/sbb-radio-button/sbb-radio-button.tsx index a703505959..ed9912977a 100644 --- a/src/components/sbb-radio-button/sbb-radio-button.tsx +++ b/src/components/sbb-radio-button/sbb-radio-button.tsx @@ -120,6 +120,15 @@ export class SbbRadioButton implements ComponentInterface { }) public stateChange: EventEmitter; + /** + * Internal event that emits when the input element is loaded. + */ + @Event({ + bubbles: true, + eventName: 'input-loaded', + }) + public inputLoaded: EventEmitter; + @Watch('checked') public handleCheckedChange(currentValue: boolean, previousValue: boolean): void { if (currentValue !== previousValue) { @@ -169,6 +178,7 @@ export class SbbRadioButton implements ComponentInterface { !!this._selectionPanelElement && !this._element.closest('sbb-selection-panel [slot="content"]'); this._setupInitialStateAndAttributeObserver(); + this.inputLoaded.emit(); } public componentDidLoad(): void { diff --git a/src/components/sbb-selection-panel/sbb-selection-panel.tsx b/src/components/sbb-selection-panel/sbb-selection-panel.tsx index 6d29116b89..63ff5f8f71 100644 --- a/src/components/sbb-selection-panel/sbb-selection-panel.tsx +++ b/src/components/sbb-selection-panel/sbb-selection-panel.tsx @@ -128,7 +128,7 @@ export class SbbSelectionPanel implements ComponentInterface { @Listen('state-change', { passive: true }) public onInputChange(event: CustomEvent): void { - if (!this._state) { + if (!this._element.dataset.state) { return; } @@ -165,6 +165,7 @@ export class SbbSelectionPanel implements ComponentInterface { this._handlerRepository.disconnect(); } + @Listen('input-loaded', { passive: true }) private _updateSelectionPanel(): void { this._checked = this._input?.checked; this._state = this._checked || this.forceOpen ? 'opened' : 'closed'; From 9a97b78b368b1f266e09ef1b0c0d6de8ab3c8483 Mon Sep 17 00:00:00 2001 From: Marco D'Auria Date: Wed, 1 Nov 2023 10:28:11 +0100 Subject: [PATCH 2/7] fix: remove dataset check --- .../sbb-radio-button-group/sbb-radio-button-group.tsx | 5 +---- .../sbb-selection-panel/sbb-selection-panel.tsx | 9 ++------- 2 files changed, 3 insertions(+), 11 deletions(-) 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 1ef97011ec..dbf2f4dc7c 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 @@ -164,10 +164,7 @@ export class SbbRadioButtonGroup implements ComponentInterface { @Listen('state-change', { passive: true }) public onRadioButtonSelect(event: CustomEvent): void { event.stopPropagation(); - if ( - event.detail.type !== 'checked' || - !(event.target as HTMLElement).parentElement.dataset.state - ) { + if (event.detail.type !== 'checked') { return; } diff --git a/src/components/sbb-selection-panel/sbb-selection-panel.tsx b/src/components/sbb-selection-panel/sbb-selection-panel.tsx index 63ff5f8f71..e409a06f9c 100644 --- a/src/components/sbb-selection-panel/sbb-selection-panel.tsx +++ b/src/components/sbb-selection-panel/sbb-selection-panel.tsx @@ -128,10 +128,6 @@ export class SbbSelectionPanel implements ComponentInterface { @Listen('state-change', { passive: true }) public onInputChange(event: CustomEvent): void { - if (!this._element.dataset.state) { - return; - } - if (event.detail.type === 'disabled') { this._disabled = event.detail.disabled; return; @@ -157,7 +153,6 @@ export class SbbSelectionPanel implements ComponentInterface { } public connectedCallback(): void { - this._updateSelectionPanel(); this._handlerRepository.connect(); } @@ -165,8 +160,8 @@ export class SbbSelectionPanel implements ComponentInterface { this._handlerRepository.disconnect(); } - @Listen('input-loaded', { passive: true }) - private _updateSelectionPanel(): void { + @Listen('input-loaded') + public updateSelectionPanel(): void { this._checked = this._input?.checked; this._state = this._checked || this.forceOpen ? 'opened' : 'closed'; this._disabled = this._input?.disabled; From a8e00c9bc17b4961483c45f7d65098a256ed9045 Mon Sep 17 00:00:00 2001 From: Marco D'Auria Date: Wed, 1 Nov 2023 13:37:16 +0100 Subject: [PATCH 3/7] fix: radio group state update --- src/components.d.ts | 4 ++++ src/components/sbb-checkbox/readme.md | 7 ++++--- src/components/sbb-checkbox/sbb-checkbox.events.ts | 1 + src/components/sbb-checkbox/sbb-checkbox.tsx | 10 ++++++++++ .../sbb-radio-button-group/sbb-radio-button-group.tsx | 5 +++-- .../sbb-selection-panel/sbb-selection-panel.tsx | 3 ++- 6 files changed, 24 insertions(+), 6 deletions(-) diff --git a/src/components.d.ts b/src/components.d.ts index ba11e3d9a5..af0bef2aaf 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -3178,6 +3178,10 @@ declare namespace LocalJSX { * @deprecated only used for React. Will probably be removed once React 19 is available. */ "onDidChange"?: (event: SbbCheckboxCustomEvent) => void; + /** + * Internal event that emits when the input element is loaded. + */ + "onInput-loaded"?: (event: SbbCheckboxCustomEvent) => void; "onState-change"?: (event: SbbCheckboxCustomEvent) => void; /** * Whether the checkbox is required. diff --git a/src/components/sbb-checkbox/readme.md b/src/components/sbb-checkbox/readme.md index 14eea3f97f..3efb9c4303 100644 --- a/src/components/sbb-checkbox/readme.md +++ b/src/components/sbb-checkbox/readme.md @@ -85,9 +85,10 @@ If you don't want the label to appear next to the checkbox, you can use `aria-la ## Events -| Event | Description | Type | -| ----------- | ----------------------------------------------------------------------------------------------------------------------------------- | ------------------ | -| `didChange` | **[DEPRECATED]** only used for React. Will probably be removed once React 19 is available.

| `CustomEvent` | +| Event | Description | Type | +| -------------- | ----------------------------------------------------------------------------------------------------------------------------------- | ------------------- | +| `didChange` | **[DEPRECATED]** only used for React. Will probably be removed once React 19 is available.

| `CustomEvent` | +| `input-loaded` | Internal event that emits when the input element is loaded. | `CustomEvent` | ## Slots diff --git a/src/components/sbb-checkbox/sbb-checkbox.events.ts b/src/components/sbb-checkbox/sbb-checkbox.events.ts index 9e6e78d0c7..c9723719ff 100644 --- a/src/components/sbb-checkbox/sbb-checkbox.events.ts +++ b/src/components/sbb-checkbox/sbb-checkbox.events.ts @@ -4,5 +4,6 @@ */ export default { didChange: 'didChange', + inputLoaded: 'input-loaded', stateChange: 'state-change', }; diff --git a/src/components/sbb-checkbox/sbb-checkbox.tsx b/src/components/sbb-checkbox/sbb-checkbox.tsx index 0e4f006536..c882ee72cb 100644 --- a/src/components/sbb-checkbox/sbb-checkbox.tsx +++ b/src/components/sbb-checkbox/sbb-checkbox.tsx @@ -115,6 +115,15 @@ export class SbbCheckbox implements ComponentInterface { }) public stateChange: EventEmitter; + /** + * Internal event that emits when the input element is loaded. + */ + @Event({ + bubbles: true, + eventName: 'input-loaded', + }) + public inputLoaded: EventEmitter; + @Watch('checked') public handleCheckedChange(currentValue: boolean, previousValue: boolean): void { if (this._isSelectionPanelInput && currentValue !== previousValue) { @@ -168,6 +177,7 @@ export class SbbCheckbox implements ComponentInterface { !this._element.closest('sbb-selection-panel [slot="content"]'); this._handlerRepository.connect(); this._setupInitialStateAndAttributeObserver(); + this.inputLoaded.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 dbf2f4dc7c..bb8952e87d 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 @@ -155,6 +155,7 @@ export class SbbRadioButtonGroup implements ComponentInterface { this._hasSelectionPanel = !!this._element.querySelector('sbb-selection-panel'); toggleDatasetEntry(this._element, 'hasSelectionPanel', this._hasSelectionPanel); this._handlerRepository.connect(); + this._updateRadios(this.value); } public disconnectedCallback(): void { @@ -185,8 +186,8 @@ export class SbbRadioButtonGroup implements ComponentInterface { this.didChange.emit({ value }); } - private _updateRadios(): void { - this.value = this._radioButtons.find((radio) => radio.checked)?.value; + private _updateRadios(initValue?: string): void { + this.value = initValue || this._radioButtons.find((radio) => radio.checked)?.value; for (const radio of this._radioButtons) { radio.checked = radio.value === this.value; diff --git a/src/components/sbb-selection-panel/sbb-selection-panel.tsx b/src/components/sbb-selection-panel/sbb-selection-panel.tsx index e409a06f9c..d90de31978 100644 --- a/src/components/sbb-selection-panel/sbb-selection-panel.tsx +++ b/src/components/sbb-selection-panel/sbb-selection-panel.tsx @@ -153,6 +153,7 @@ export class SbbSelectionPanel implements ComponentInterface { } public connectedCallback(): void { + this._updateSelectionPanel(); this._handlerRepository.connect(); } @@ -161,7 +162,7 @@ export class SbbSelectionPanel implements ComponentInterface { } @Listen('input-loaded') - public updateSelectionPanel(): void { + private _updateSelectionPanel(): void { this._checked = this._input?.checked; this._state = this._checked || this.forceOpen ? 'opened' : 'closed'; this._disabled = this._input?.disabled; From 8cdf7e6f9598a244d2236d3601aadf2d63a3df9b Mon Sep 17 00:00:00 2001 From: Marco D'Auria Date: Wed, 1 Nov 2023 15:17:43 +0100 Subject: [PATCH 4/7] test: add e2e test --- .../sbb-radio-button-group.e2e.ts | 32 +++++++++++++++++-- 1 file changed, 30 insertions(+), 2 deletions(-) diff --git a/src/components/sbb-radio-button-group/sbb-radio-button-group.e2e.ts b/src/components/sbb-radio-button-group/sbb-radio-button-group.e2e.ts index 56422ca207..ed0d56a939 100644 --- a/src/components/sbb-radio-button-group/sbb-radio-button-group.e2e.ts +++ b/src/components/sbb-radio-button-group/sbb-radio-button-group.e2e.ts @@ -70,7 +70,7 @@ describe('sbb-radio-button-group', () => { 'sbb-radio-button-group > sbb-radio-button#sbb-radio-3', ); - await element.setProperty('disabled', true); + element.setProperty('disabled', true); await page.waitForChanges(); await disabledRadio.click(); @@ -82,7 +82,7 @@ describe('sbb-radio-button-group', () => { await page.waitForChanges(); expect(secondRadio).not.toHaveAttribute('checked'); - await element.setProperty('disabled', false); + element.setProperty('disabled', false); await page.waitForChanges(); await disabledRadio.click(); @@ -146,5 +146,33 @@ describe('sbb-radio-button-group', () => { expect(firstRadio).toHaveAttribute('checked'); }); + + it('sets the value correctly on slot change', async () => { + const firstRadio = await page.find('sbb-radio-button-group > sbb-radio-button#sbb-radio-1'); + + expect(firstRadio).toHaveAttribute('checked'); + expect(await element.getProperty('value')).toBe('Value one'); + + await page.evaluate(() => { + const newRadios = ['New radio one', 'New radio two']; + const radioGroup = document.querySelector('sbb-radio-button-group'); + + // Remove all the radio buttons + while (radioGroup.firstChild) { + radioGroup.removeChild(radioGroup.firstChild); + } + + // Add two new radios + newRadios.forEach(async (radio, i) => { + const newRadio = document.createElement('SBB-RADIO-BUTTON') as HTMLSbbRadioButtonElement; + newRadio.innerText = radio; + newRadio.value = radio; + newRadio.checked = i === 0; + radioGroup.appendChild(newRadio); + }); + }); + + expect(await element.getProperty('value')).toBe('New radio one'); + }); }); }); From 2d1742e76f6e13c33eac99b4839db23eb41b9404 Mon Sep 17 00:00:00 2001 From: Marco D'Auria Date: Wed, 1 Nov 2023 15:50:27 +0100 Subject: [PATCH 5/7] fix: review --- src/components.d.ts | 4 ++-- src/components/sbb-checkbox/readme.md | 8 ++++---- src/components/sbb-checkbox/sbb-checkbox.events.ts | 2 +- src/components/sbb-checkbox/sbb-checkbox.tsx | 6 +++--- .../sbb-radio-button-group/sbb-radio-button-group.tsx | 2 +- src/components/sbb-radio-button/readme.md | 8 ++++---- .../sbb-radio-button/sbb-radio-button.events.ts | 2 +- src/components/sbb-radio-button/sbb-radio-button.tsx | 6 +++--- .../sbb-selection-panel/sbb-selection-panel.tsx | 3 ++- 9 files changed, 21 insertions(+), 20 deletions(-) diff --git a/src/components.d.ts b/src/components.d.ts index af0bef2aaf..776c1ac6fe 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -3181,7 +3181,7 @@ declare namespace LocalJSX { /** * Internal event that emits when the input element is loaded. */ - "onInput-loaded"?: (event: SbbCheckboxCustomEvent) => void; + "onSbb-checkbox-loaded"?: (event: SbbCheckboxCustomEvent) => void; "onState-change"?: (event: SbbCheckboxCustomEvent) => void; /** * Whether the checkbox is required. @@ -4183,7 +4183,7 @@ declare namespace LocalJSX { /** * Internal event that emits when the input element is loaded. */ - "onInput-loaded"?: (event: SbbRadioButtonCustomEvent) => void; + "onSbb-radio-button-loaded"?: (event: SbbRadioButtonCustomEvent) => void; /** * Internal event that emits whenever the state of the radio option in relation to the parent selection panel changes. */ diff --git a/src/components/sbb-checkbox/readme.md b/src/components/sbb-checkbox/readme.md index 3efb9c4303..99f48a87a0 100644 --- a/src/components/sbb-checkbox/readme.md +++ b/src/components/sbb-checkbox/readme.md @@ -85,10 +85,10 @@ If you don't want the label to appear next to the checkbox, you can use `aria-la ## Events -| Event | Description | Type | -| -------------- | ----------------------------------------------------------------------------------------------------------------------------------- | ------------------- | -| `didChange` | **[DEPRECATED]** only used for React. Will probably be removed once React 19 is available.

| `CustomEvent` | -| `input-loaded` | Internal event that emits when the input element is loaded. | `CustomEvent` | +| Event | Description | Type | +| --------------------- | ----------------------------------------------------------------------------------------------------------------------------------- | ------------------- | +| `didChange` | **[DEPRECATED]** only used for React. Will probably be removed once React 19 is available.

| `CustomEvent` | +| `sbb-checkbox-loaded` | Internal event that emits when the input element is loaded. | `CustomEvent` | ## Slots diff --git a/src/components/sbb-checkbox/sbb-checkbox.events.ts b/src/components/sbb-checkbox/sbb-checkbox.events.ts index c9723719ff..2b5485d0a9 100644 --- a/src/components/sbb-checkbox/sbb-checkbox.events.ts +++ b/src/components/sbb-checkbox/sbb-checkbox.events.ts @@ -4,6 +4,6 @@ */ export default { didChange: 'didChange', - inputLoaded: 'input-loaded', + sbbCheckboxLoaded: 'sbb-checkbox-loaded', stateChange: 'state-change', }; diff --git a/src/components/sbb-checkbox/sbb-checkbox.tsx b/src/components/sbb-checkbox/sbb-checkbox.tsx index c882ee72cb..c390c69d19 100644 --- a/src/components/sbb-checkbox/sbb-checkbox.tsx +++ b/src/components/sbb-checkbox/sbb-checkbox.tsx @@ -120,9 +120,9 @@ export class SbbCheckbox implements ComponentInterface { */ @Event({ bubbles: true, - eventName: 'input-loaded', + eventName: 'sbb-checkbox-loaded', }) - public inputLoaded: EventEmitter; + public sbbCheckboxLoaded: EventEmitter; @Watch('checked') public handleCheckedChange(currentValue: boolean, previousValue: boolean): void { @@ -177,7 +177,7 @@ export class SbbCheckbox implements ComponentInterface { !this._element.closest('sbb-selection-panel [slot="content"]'); this._handlerRepository.connect(); this._setupInitialStateAndAttributeObserver(); - this.inputLoaded.emit(); + this._isSelectionPanelInput && 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 bb8952e87d..9945a12057 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 @@ -187,7 +187,7 @@ export class SbbRadioButtonGroup implements ComponentInterface { } private _updateRadios(initValue?: string): void { - this.value = initValue || this._radioButtons.find((radio) => radio.checked)?.value; + this.value = initValue ?? this._radioButtons.find((radio) => radio.checked)?.value; for (const radio of this._radioButtons) { radio.checked = radio.value === this.value; diff --git a/src/components/sbb-radio-button/readme.md b/src/components/sbb-radio-button/readme.md index b41ea8ad73..4e01d0c054 100644 --- a/src/components/sbb-radio-button/readme.md +++ b/src/components/sbb-radio-button/readme.md @@ -56,10 +56,10 @@ The component has two different sizes, which can be changed using the `size` pro ## Events -| Event | Description | Type | -| -------------- | ------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------ | -| `input-loaded` | Internal event that emits when the input element is loaded. | `CustomEvent` | -| `state-change` | Internal event that emits whenever the state of the radio option in relation to the parent selection panel changes. | `CustomEvent` | +| Event | Description | Type | +| ------------------------- | ------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------ | +| `sbb-radio-button-loaded` | Internal event that emits when the input element is loaded. | `CustomEvent` | +| `state-change` | Internal event that emits whenever the state of the radio option in relation to the parent selection panel changes. | `CustomEvent` | ## Methods diff --git a/src/components/sbb-radio-button/sbb-radio-button.events.ts b/src/components/sbb-radio-button/sbb-radio-button.events.ts index 3ef983a72e..1c945bf471 100644 --- a/src/components/sbb-radio-button/sbb-radio-button.events.ts +++ b/src/components/sbb-radio-button/sbb-radio-button.events.ts @@ -3,6 +3,6 @@ * See stencil.config.ts in the root directory. */ export default { - inputLoaded: 'input-loaded', + sbbRadioButtonLoaded: 'sbb-radio-button-loaded', stateChange: 'state-change', }; diff --git a/src/components/sbb-radio-button/sbb-radio-button.tsx b/src/components/sbb-radio-button/sbb-radio-button.tsx index ed9912977a..8f97400f84 100644 --- a/src/components/sbb-radio-button/sbb-radio-button.tsx +++ b/src/components/sbb-radio-button/sbb-radio-button.tsx @@ -125,9 +125,9 @@ export class SbbRadioButton implements ComponentInterface { */ @Event({ bubbles: true, - eventName: 'input-loaded', + eventName: 'sbb-radio-button-loaded', }) - public inputLoaded: EventEmitter; + public sbbRadioButtonLoaded: EventEmitter; @Watch('checked') public handleCheckedChange(currentValue: boolean, previousValue: boolean): void { @@ -178,7 +178,7 @@ export class SbbRadioButton implements ComponentInterface { !!this._selectionPanelElement && !this._element.closest('sbb-selection-panel [slot="content"]'); this._setupInitialStateAndAttributeObserver(); - this.inputLoaded.emit(); + this._isSelectionPanelInput && this.sbbRadioButtonLoaded.emit(); } public componentDidLoad(): void { diff --git a/src/components/sbb-selection-panel/sbb-selection-panel.tsx b/src/components/sbb-selection-panel/sbb-selection-panel.tsx index d90de31978..241496b599 100644 --- a/src/components/sbb-selection-panel/sbb-selection-panel.tsx +++ b/src/components/sbb-selection-panel/sbb-selection-panel.tsx @@ -161,7 +161,8 @@ export class SbbSelectionPanel implements ComponentInterface { this._handlerRepository.disconnect(); } - @Listen('input-loaded') + @Listen('sbb-checkbox-loaded') + @Listen('sbb-radio-button-loaded') private _updateSelectionPanel(): void { this._checked = this._input?.checked; this._state = this._checked || this.forceOpen ? 'opened' : 'closed'; From 19046618f5bdcaedc3e3c35395a021d44f7aaf99 Mon Sep 17 00:00:00 2001 From: Marco D'Auria Date: Wed, 8 Nov 2023 12:01:40 +0100 Subject: [PATCH 6/7] fix: update selection panel on input load only --- src/components/sbb-selection-panel/sbb-selection-panel.spec.ts | 2 +- src/components/sbb-selection-panel/sbb-selection-panel.tsx | 3 +-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/src/components/sbb-selection-panel/sbb-selection-panel.spec.ts b/src/components/sbb-selection-panel/sbb-selection-panel.spec.ts index cd80c11855..08bb5b1eb9 100644 --- a/src/components/sbb-selection-panel/sbb-selection-panel.spec.ts +++ b/src/components/sbb-selection-panel/sbb-selection-panel.spec.ts @@ -25,7 +25,7 @@ describe('sbb-selection-panel', () => { }); expect(root).toEqualHtml(` - +
diff --git a/src/components/sbb-selection-panel/sbb-selection-panel.tsx b/src/components/sbb-selection-panel/sbb-selection-panel.tsx index 241496b599..7d1bee67b8 100644 --- a/src/components/sbb-selection-panel/sbb-selection-panel.tsx +++ b/src/components/sbb-selection-panel/sbb-selection-panel.tsx @@ -153,7 +153,6 @@ export class SbbSelectionPanel implements ComponentInterface { } public connectedCallback(): void { - this._updateSelectionPanel(); this._handlerRepository.connect(); } @@ -163,7 +162,7 @@ export class SbbSelectionPanel implements ComponentInterface { @Listen('sbb-checkbox-loaded') @Listen('sbb-radio-button-loaded') - private _updateSelectionPanel(): void { + public updateSelectionPanel(): void { this._checked = this._input?.checked; this._state = this._checked || this.forceOpen ? 'opened' : 'closed'; this._disabled = this._input?.disabled; From 8e4888fd46dc97de39bc5b328a90c52910ed06b3 Mon Sep 17 00:00:00 2001 From: Marco D'Auria Date: Wed, 8 Nov 2023 15:46:26 +0100 Subject: [PATCH 7/7] fix: update radio only after component load --- .../sbb-radio-button-group/sbb-radio-button-group.tsx | 7 ++++++- .../sbb-selection-panel/sbb-selection-panel.tsx | 9 +++++++++ 2 files changed, 15 insertions(+), 1 deletion(-) 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 9945a12057..f88128ae30 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 @@ -78,6 +78,7 @@ export class SbbRadioButtonGroup implements ComponentInterface { @Element() private _element!: HTMLElement; private _hasSelectionPanel: boolean; + private _componentLoaded = false; @Watch('value') public valueChanged(value: any | undefined): void { @@ -158,6 +159,10 @@ export class SbbRadioButtonGroup implements ComponentInterface { this._updateRadios(this.value); } + public componentDidLoad(): void { + this._componentLoaded = true; + } + public disconnectedCallback(): void { this._handlerRepository.disconnect(); } @@ -165,7 +170,7 @@ export class SbbRadioButtonGroup implements ComponentInterface { @Listen('state-change', { passive: true }) public onRadioButtonSelect(event: CustomEvent): void { event.stopPropagation(); - if (event.detail.type !== 'checked') { + if (event.detail.type !== 'checked' || !this._componentLoaded) { return; } diff --git a/src/components/sbb-selection-panel/sbb-selection-panel.tsx b/src/components/sbb-selection-panel/sbb-selection-panel.tsx index 7d1bee67b8..948ccc12e7 100644 --- a/src/components/sbb-selection-panel/sbb-selection-panel.tsx +++ b/src/components/sbb-selection-panel/sbb-selection-panel.tsx @@ -119,6 +119,7 @@ export class SbbSelectionPanel implements ComponentInterface { ); private _contentElement: HTMLElement; + private _componentLoaded = false; private get _input(): HTMLSbbCheckboxElement | HTMLSbbRadioButtonElement { return this._element.querySelector('sbb-checkbox, sbb-radio-button') as @@ -128,6 +129,10 @@ export class SbbSelectionPanel implements ComponentInterface { @Listen('state-change', { passive: true }) public onInputChange(event: CustomEvent): void { + if (!this._state || !this._componentLoaded) { + return; + } + if (event.detail.type === 'disabled') { this._disabled = event.detail.disabled; return; @@ -156,6 +161,10 @@ export class SbbSelectionPanel implements ComponentInterface { this._handlerRepository.connect(); } + public componentDidLoad(): void { + this._componentLoaded = true; + } + public disconnectedCallback(): void { this._handlerRepository.disconnect(); }