fix(sbb-select): fix display value in SSR context (#3027)

Closes #3021 --------- Co-authored-by: Davide Mininni <[email protected]>
sbb-design-systems · Aug 27, 2024 · f733b38 · f733b38
1 parent 3b3a48d
commit f733b38
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 10 deletions.
diff --git 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';
@@ -9,7 +9,7 @@ import '../option.js';
 describe(`sbb-select ssr`, () => {
   let root: SbbSelectElement;
 
-  beforeEach(async () => {
+  it('renders', async () => {
     root = await ssrHydratedFixture(
       html`
         <sbb-select placeholder="Placeholder">
@@ -20,9 +20,25 @@ describe(`sbb-select ssr`, () => {
       `,
       { modules: ['./select.js', '../option.js'] },
     );
+
+    assert.instanceOf(root, SbbSelectElement);
   });
 
-  it('renders', () => {
+  it('renders with value attribute', async () => {
+    root = await ssrHydratedFixture(
+      html`
+        <sbb-select placeholder="Placeholder" value="2">
+          <sbb-option id="option-1" value="1">First</sbb-option>
+          <sbb-option id="option-2" value="2">Second</sbb-option>
+          <sbb-option id="option-3" value="3">Third</sbb-option>
+        </sbb-select>
+      `,
+      { modules: ['./select.js', '../option.js'] },
+    );
+
     assert.instanceOf(root, SbbSelectElement);
+    expect(root.shadowRoot!.querySelector('.sbb-select__trigger')!.textContent!.trim()).to.be.equal(
+      'Second',
+    );
   });
 });
diff --git a/src/elements/select/select.ts b/src/elements/select/select.ts
@@ -2,14 +2,20 @@ 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';
 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,6 +685,19 @@ export class SbbSelectElement extends SbbUpdateSchedulerMixin(
     }
   }
 
+  private _spreadDeferredDisplayValue(
+    placeholder: TemplateResult,
+  ): (TemplateResult | Promise<TemplateResult>)[] {
+    return [this._deferredDisplayValue(placeholder), placeholder];
+  }
+
+  private async _deferredDisplayValue(placeholder: TemplateResult): Promise<TemplateResult> {
+    if (this.hydrationRequired) {
+      await this.hydrationComplete;
+    }
+    return this._displayValue ? html`${this._displayValue}` : placeholder;
+  }
+
   protected override render(): TemplateResult {
     return html`
       <!-- This element is visually hidden and will be appended to the light DOM to allow screen
@@ -696,14 +715,16 @@ export class SbbSelectElement extends SbbUpdateSchedulerMixin(
         @click=${this._toggleOpening}
         ${ref((ref) => (this._triggerElement = ref as HTMLElement))}
       >
-        ${this._displayValue ? html`${this._displayValue}` : html`<span>${this.placeholder}</span>`}
+        ${until(...this._spreadDeferredDisplayValue(html`<span>${this.placeholder}</span>`))}
       </div>
 
       <!-- Visually display the value -->
       <div class="sbb-select__trigger" aria-hidden="true">
-        ${this._displayValue
-          ? html`${this._displayValue}`
-          : html`<span class="sbb-select__trigger--placeholder">${this.placeholder}</span>`}
+        ${until(
+          ...this._spreadDeferredDisplayValue(
+            html`<span class="sbb-select__trigger--placeholder">${this.placeholder}</span>`,
+          ),
+        )}
       </div>
 
       <div class="sbb-select__gap-fix"></div>