fix(sbb-select): adapt setup to work with Next.js hydration (#2270)

`<sbb-select>` causes a hydration error in Next.js. This PR implements a workaround by using the render logic of `@lit/react` to run our setup logic only after Next.js hydration or directly, if not in a Next.js environment.

src/components/core/dom/platform.ts

@@ -67,3 +67,6 @@ export const isAndroid = (): boolean =>
 /** Whether the current browser is Safari. */
 export const isSafari = (): boolean =>
   isBrowser() && /safari/i.test(navigator.userAgent) && isWebkit();
+
+/** Whether the application is being rendered in a Next.js environment. */
+export const isNextjs = (): boolean => !!globalThis.next;

src/components/datepicker/datepicker/datepicker.e2e.ts

@@ -220,7 +220,9 @@ describe('sbb-datepicker', () => {
       expect(input).not.to.have.attribute('data-sbb-invalid');
     });
 
-    it('should interpret valid values and set accessibility labels', async () => {
+    it('should interpret valid values and set accessibility labels', async function () {
+      // This test is flaky on Firefox, so we retry a few times.
+      this.retries(3);
       const testCases = [
         {
           value: '5.5.0',

src/components/select/select.ts

@@ -10,6 +10,7 @@ import {
   toggleDatasetEntry,
   getDocumentWritingMode,
   setAttribute,
+  isNextjs,
 } from '../core/dom';
 import { ConnectedAbortController, EventEmitter } from '../core/eventing';
 import {
@@ -231,12 +232,27 @@ export class SbbSelect extends UpdateScheduler(LitElement) {
 
     // Wait for ssr hydration
     this.startUpdate();
-    setTimeout(() => {
-      this._setupOrigin();
-      this._setupTrigger();
-      this._didLoad = true;
-      this.completeUpdate();
-    });
+    if (!isNextjs()) {
+      this._setupSelect();
+    }
+  }
+
+  /**
+   * Removes element's first attribute whose qualified name is qualifiedName.
+   *
+   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/removeAttribute)
+   * @internal We need to override this due to a hydration issue with Next.js.
+   */
+  public override removeAttribute(qualifiedName: string): void {
+    // In Next.js the hydration needs to finish before we can manipulate the light DOM.
+    // @lit/react calls removeAttribute('defer-hydration') in a useLayoutEffect,
+    // which is done after hydration is finished. Due to this we intercept this call
+    // in overriding removeAttribute to finish initialization of the sbb-select.
+    // https://github.com/lit/lit/blob/main/packages/react/src/create-component.ts#L293-L296
+    if (isNextjs() && qualifiedName === 'defer-hydration') {
+      this._setupSelect();
+    }
+    super.removeAttribute(qualifiedName);
   }
 
   public override connectedCallback(): void {
@@ -291,6 +307,13 @@ export class SbbSelect extends UpdateScheduler(LitElement) {
     );
   }
 
+  private _setupSelect(): void {
+    this._setupOrigin();
+    this._setupTrigger();
+    this._didLoad = true;
+    this.completeUpdate();
+  }
+
   /** Sets the originElement; if the component is used in a sbb-form-field uses it, otherwise uses the parentElement. */
   private _setupOrigin(): void {
     const formField = this.closest?.('sbb-form-field');