From 97a40610abea58f3d9f85880e4f96e0ad9a075b5 Mon Sep 17 00:00:00 2001 From: Jeri Peier Date: Fri, 12 Jan 2024 14:59:30 +0100 Subject: [PATCH] fix(sbb-toggle): deal with undefined option component (#2327) Co-authored-by: Lukas Spirig --- src/components/toggle/toggle/toggle.ts | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/src/components/toggle/toggle/toggle.ts b/src/components/toggle/toggle/toggle.ts index cb38bb9484..1fbebcc20e 100644 --- a/src/components/toggle/toggle/toggle.ts +++ b/src/components/toggle/toggle/toggle.ts @@ -75,8 +75,15 @@ export class SbbToggleElement extends LitElement { private _valueChanged(value: any | undefined): void { const options = this._options; + // If options are not yet defined web components, we can check if attribute is already set as a fallback. + // We do this by checking whether value property is available (defined component). const selectedOption = - options.find((o) => o.value === value) ?? options.find((o) => o.checked) ?? options[0]; + options.find( + (o) => value === ('value' in o ? o.value : (o as HTMLElement).getAttribute('value')), + ) ?? + options.find((o) => o.checked) ?? + options[0]; + if (!selectedOption) { isBrowser() && console.warn(`sbb-toggle: No available options! (${this.id || 'No id'})`); return; @@ -152,7 +159,11 @@ export class SbbToggleElement extends LitElement { const options = this._options; - if (options.every((o) => !o.checked) || !this._toggleElement) { + if ( + options.every((o) => !o.checked) || + options.every((o) => !o.clientWidth) || + !this._toggleElement + ) { return; }