From 890d8e2b022c3ba685e97627b3c96eaaed5b5359 Mon Sep 17 00:00:00 2001 From: Davide Mininni Date: Fri, 23 Aug 2024 15:17:03 +0200 Subject: [PATCH 1/3] fix: bug in ssr --- src/elements/select/select.ssr.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/elements/select/select.ssr.spec.ts b/src/elements/select/select.ssr.spec.ts index e59508c678..ce93bd3bfd 100644 --- a/src/elements/select/select.ssr.spec.ts +++ b/src/elements/select/select.ssr.spec.ts @@ -12,7 +12,7 @@ describe(`sbb-select ssr`, () => { beforeEach(async () => { root = await ssrHydratedFixture( html` - + First Second Third From 49142ab0976e70069c3e739cbb7a8955db6c845d Mon Sep 17 00:00:00 2001 From: Jeremias Peier Date: Mon, 26 Aug 2024 16:18:39 +0200 Subject: [PATCH 2/3] fix(sbb-select): fix display value in SSR context --- src/elements/select/select.ssr.spec.ts | 32 ++++++++++++++++++++++++-- src/elements/select/select.ts | 29 +++++++++++++++++------ 2 files changed, 52 insertions(+), 9 deletions(-) diff --git a/src/elements/select/select.ssr.spec.ts b/src/elements/select/select.ssr.spec.ts index ce93bd3bfd..892d1705e1 100644 --- a/src/elements/select/select.ssr.spec.ts +++ b/src/elements/select/select.ssr.spec.ts @@ -9,7 +9,7 @@ import '../option.js'; describe(`sbb-select ssr`, () => { let root: SbbSelectElement; - beforeEach(async () => { + it('renders', async () => { root = await ssrHydratedFixture( html` @@ -20,9 +20,37 @@ describe(`sbb-select ssr`, () => { `, { modules: ['./select.js', '../option.js'] }, ); + + assert.instanceOf(root, SbbSelectElement); + }); + + it('renders with value attribute', async () => { + root = await ssrHydratedFixture( + html` + + First + Second + Third + + `, + { modules: ['./select.js', '../option.js'] }, + ); + + assert.instanceOf(root, SbbSelectElement); }); - it('renders', () => { + it('renders with value property', async () => { + root = await ssrHydratedFixture( + html` + + First + Second + Third + + `, + { modules: ['./select.js', '../option.js'] }, + ); + assert.instanceOf(root, SbbSelectElement); }); }); diff --git a/src/elements/select/select.ts b/src/elements/select/select.ts index 7bd7a5eed1..8d1a6e3038 100644 --- a/src/elements/select/select.ts +++ b/src/elements/select/select.ts @@ -2,6 +2,7 @@ import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit'; import { html, nothing } from 'lit'; import { customElement, property, state } from 'lit/decorators.js'; import { ref } from 'lit/directives/ref.js'; +import { until } from 'lit/directives/until.js'; import { getNextElementIndex } from '../core/a11y.js'; import { SbbOpenCloseBaseElement } from '../core/base-elements.js'; @@ -9,7 +10,12 @@ import { SbbConnectedAbortController } from '../core/controllers.js'; import { hostAttributes } from '../core/decorators.js'; import { getDocumentWritingMode, isNextjs, isSafari } from '../core/dom.js'; import { EventEmitter } from '../core/eventing.js'; -import { SbbDisabledMixin, SbbNegativeMixin, SbbUpdateSchedulerMixin } from '../core/mixins.js'; +import { + SbbDisabledMixin, + SbbHydrationMixin, + SbbNegativeMixin, + SbbUpdateSchedulerMixin, +} from '../core/mixins.js'; import { isEventOnElement, overlayGapFixCorners, setOverlayPosition } from '../core/overlay.js'; import type { SbbOptGroupElement, SbbOptionElement } from '../option.js'; @@ -49,7 +55,7 @@ export interface SelectChange { role: ariaRoleOnHost ? 'listbox' : null, }) export class SbbSelectElement extends SbbUpdateSchedulerMixin( - SbbDisabledMixin(SbbNegativeMixin(SbbOpenCloseBaseElement)), + SbbDisabledMixin(SbbNegativeMixin(SbbHydrationMixin(SbbOpenCloseBaseElement))), ) { public static override styles: CSSResultGroup = style; @@ -163,7 +169,7 @@ export class SbbSelectElement extends SbbUpdateSchedulerMixin( /** Gets the current displayed value. */ public getDisplayValue(): string { - return !this._displayValue ? '' : this._displayValue; + return this._displayValue ?? ''; } /** Listens to option changes. */ @@ -679,7 +685,18 @@ export class SbbSelectElement extends SbbUpdateSchedulerMixin( } } + private async _deferredDisplayValue(placeholder: TemplateResult): Promise { + if (this.hydrationRequired) { + await this.hydrationComplete; + } + return this._displayValue ? html`${this._displayValue}` : placeholder; + } + protected override render(): TemplateResult { + const placeholder = html` + ${this.placeholder} + `; + return html` @@ -696,14 +713,12 @@ export class SbbSelectElement extends SbbUpdateSchedulerMixin( @click=${this._toggleOpening} ${ref((ref) => (this._triggerElement = ref as HTMLElement))} > - ${this._displayValue ? html`${this._displayValue}` : html`${this.placeholder}`} + ${until(this._deferredDisplayValue(placeholder), placeholder)}
From a2005ea8e638061c50e9b698d73a02485fdbf232 Mon Sep 17 00:00:00 2001 From: Jeremias Peier Date: Tue, 27 Aug 2024 13:14:47 +0200 Subject: [PATCH 3/3] fix: review --- src/elements/select/select.ssr.spec.ts | 22 +++++----------------- src/elements/select/select.ts | 20 +++++++++++++------- 2 files changed, 18 insertions(+), 24 deletions(-) diff --git a/src/elements/select/select.ssr.spec.ts b/src/elements/select/select.ssr.spec.ts index 892d1705e1..323c0369c0 100644 --- a/src/elements/select/select.ssr.spec.ts +++ b/src/elements/select/select.ssr.spec.ts @@ -1,4 +1,4 @@ -import { assert } from '@open-wc/testing'; +import { assert, expect } from '@open-wc/testing'; import { html } from 'lit'; import { ssrHydratedFixture } from '../core/testing/private.js'; @@ -12,7 +12,7 @@ describe(`sbb-select ssr`, () => { it('renders', async () => { root = await ssrHydratedFixture( html` - + First Second Third @@ -27,7 +27,7 @@ describe(`sbb-select ssr`, () => { it('renders with value attribute', async () => { root = await ssrHydratedFixture( html` - + First Second Third @@ -37,20 +37,8 @@ describe(`sbb-select ssr`, () => { ); assert.instanceOf(root, SbbSelectElement); - }); - - it('renders with value property', async () => { - root = await ssrHydratedFixture( - html` - - First - Second - Third - - `, - { modules: ['./select.js', '../option.js'] }, + expect(root.shadowRoot!.querySelector('.sbb-select__trigger')!.textContent!.trim()).to.be.equal( + 'Second', ); - - assert.instanceOf(root, SbbSelectElement); }); }); diff --git a/src/elements/select/select.ts b/src/elements/select/select.ts index 8d1a6e3038..cfbca69f45 100644 --- a/src/elements/select/select.ts +++ b/src/elements/select/select.ts @@ -685,7 +685,13 @@ export class SbbSelectElement extends SbbUpdateSchedulerMixin( } } - private async _deferredDisplayValue(placeholder: TemplateResult): Promise { + private _spreadDeferredDisplayValue( + placeholder: TemplateResult, + ): (TemplateResult | Promise)[] { + return [this._deferredDisplayValue(placeholder), placeholder]; + } + + private async _deferredDisplayValue(placeholder: TemplateResult): Promise { if (this.hydrationRequired) { await this.hydrationComplete; } @@ -693,10 +699,6 @@ export class SbbSelectElement extends SbbUpdateSchedulerMixin( } protected override render(): TemplateResult { - const placeholder = html` - ${this.placeholder} - `; - return html` @@ -713,12 +715,16 @@ export class SbbSelectElement extends SbbUpdateSchedulerMixin( @click=${this._toggleOpening} ${ref((ref) => (this._triggerElement = ref as HTMLElement))} > - ${until(this._deferredDisplayValue(placeholder), placeholder)} + ${until(...this._spreadDeferredDisplayValue(html`${this.placeholder}`))}