From 956942089f6252aecd0dbdd266a11676d5b8c215 Mon Sep 17 00:00:00 2001
From: TomMenga <tommaso.menga-94@hotmail.it>
Date: Wed, 29 Nov 2023 10:22:10 +0100
Subject: [PATCH 1/3] fix(sbb-select): fix template mismatch on hydration

---
 src/components/select/select.ts | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/components/select/select.ts b/src/components/select/select.ts
index 1ef93aaa04..b366f7a096 100644
--- a/src/components/select/select.ts
+++ b/src/components/select/select.ts
@@ -3,6 +3,7 @@ import { customElement, property, state } from 'lit/decorators.js';
 import { ref } from 'lit/directives/ref.js';
 
 import { getNextElementIndex, assignId } from '../core/a11y';
+import { UpdateScheduler } from '../core/common-behaviors';
 import {
   isSafari,
   isValidAttribute,
@@ -41,7 +42,7 @@ export interface SelectChange {
  * @event {CustomEvent<void>} didClose - Emits whenever the `sbb-select` is closed.
  */
 @customElement('sbb-select')
-export class SbbSelect extends LitElement {
+export class SbbSelect extends UpdateScheduler(LitElement) {
   public static override styles: CSSResultGroup = style;
   public static readonly events = {
     didChange: 'didChange',
@@ -217,13 +218,18 @@ export class SbbSelect extends LitElement {
   }
 
   protected override firstUpdated(): void {
-    this._setupOrigin();
-    this._setupTrigger();
-
     // Override the default focus behavior
     this.focus = () => this._triggerElement.focus();
     this.blur = () => this._triggerElement.blur();
-    this._didLoad = true;
+
+    // Wait for ssr hydration
+    this.startUpdate();
+    setTimeout(() => {
+      this._setupOrigin();
+      this._setupTrigger();
+      this._didLoad = true;
+      this.completeUpdate();
+    });
   }
 
   public override connectedCallback(): void {

From ad9dc7d6cf35aea850382cf1bf133c6e27376bd7 Mon Sep 17 00:00:00 2001
From: TomMenga <tommaso.menga-94@hotmail.it>
Date: Wed, 29 Nov 2023 14:26:52 +0100
Subject: [PATCH 2/3] fix(sbb-select): fix template mismatch on hydration pt.2

---
 src/components/form-field/form-field/form-field.e2e.ts | 1 +
 src/components/form-field/form-field/form-field.ts     | 2 +-
 src/components/select/select.e2e.ts                    | 3 ++-
 src/components/select/select.ts                        | 8 ++++++++
 4 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/components/form-field/form-field/form-field.e2e.ts b/src/components/form-field/form-field/form-field.e2e.ts
index cad6dccb40..78d8ab0912 100644
--- a/src/components/form-field/form-field/form-field.e2e.ts
+++ b/src/components/form-field/form-field/form-field.e2e.ts
@@ -146,6 +146,7 @@ describe('sbb-form-field', () => {
         </sbb-form-field>
       `);
       select = document.querySelector('sbb-select');
+      await waitForLitRender(element);
     });
 
     it('renders', async () => {
diff --git a/src/components/form-field/form-field/form-field.ts b/src/components/form-field/form-field/form-field.ts
index 41a5d07e49..86946f5d9c 100644
--- a/src/components/form-field/form-field/form-field.ts
+++ b/src/components/form-field/form-field/form-field.ts
@@ -327,7 +327,7 @@ export class SbbFormField extends LitElement {
         signal: this._inputAbortController.signal,
       });
 
-      inputFocusElement = this.querySelector('.sbb-select-invisible-trigger');
+      inputFocusElement = (this._input as SbbSelect).inputElement;
     }
 
     inputFocusElement.addEventListener(
diff --git a/src/components/select/select.e2e.ts b/src/components/select/select.e2e.ts
index 7d1ffb58a3..deb28a4b29 100644
--- a/src/components/select/select.e2e.ts
+++ b/src/components/select/select.e2e.ts
@@ -26,8 +26,9 @@ describe('sbb-select', () => {
         </sbb-select>
       </div>
     `);
-
     element = document.querySelector('sbb-select');
+    await waitForLitRender(element);
+
     comboBoxElement = document.querySelector('[role="combobox"]');
     focusableElement = comboBoxElement;
     firstOption = element.querySelector('#option-1');
diff --git a/src/components/select/select.ts b/src/components/select/select.ts
index b366f7a096..66a05d7cff 100644
--- a/src/components/select/select.ts
+++ b/src/components/select/select.ts
@@ -137,6 +137,14 @@ export class SbbSelect extends UpdateScheduler(LitElement) {
    */
   private _ariaRoleOnHost = isSafari();
 
+  /**
+   * The 'combobox' input element
+   * @internal
+   */
+  public get inputElement(): HTMLElement {
+    return this._triggerElement;
+  }
+
   /** Gets all the SbbOption projected in the select. */
   private get _options(): SbbOption[] {
     return Array.from(this.querySelectorAll?.('sbb-option') ?? []);

From eff676edf89e27dbe8540fd5c2d9e21e508123cb Mon Sep 17 00:00:00 2001
From: TomMenga <tommaso.menga-94@hotmail.it>
Date: Mon, 4 Dec 2023 09:28:04 +0100
Subject: [PATCH 3/3] fix(sbb-select): fix template mismatch on hydration pt.3

---
 src/components/select/select.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/select/select.ts b/src/components/select/select.ts
index 66a05d7cff..f468ebf60e 100644
--- a/src/components/select/select.ts
+++ b/src/components/select/select.ts
@@ -659,7 +659,7 @@ export class SbbSelect extends UpdateScheduler(LitElement) {
       <!-- This element is visually hidden and will be appended to the light DOM to allow screen
       readers to work properly -->
       <div
-        class="sbb-screen-reader-only sbb-select-invisible-trigger"
+        class="sbb-screen-reader-only"
         tabindex=${this.disabled ? nothing : '0'}
         role="combobox"
         aria-haspopup="listbox"