From 95198270efbf02dfc54bc5228ca9fab0b9293503 Mon Sep 17 00:00:00 2001
From: Lukas Spirig <lukas.spirig@sbb.ch>
Date: Fri, 5 Jul 2024 12:23:12 +0200
Subject: [PATCH] fix(sbb-form-field): ensure input element is detected during
 hydration (#2894)

Closes #2877
---
 .../form-field/form-field-clear/form-field-clear.ts        | 7 ++-----
 src/elements/form-field/form-field/form-field.ts           | 4 ++--
 2 files changed, 4 insertions(+), 7 deletions(-)

diff --git a/src/elements/form-field/form-field-clear/form-field-clear.ts b/src/elements/form-field/form-field-clear/form-field-clear.ts
index a6e2902953..923f62b197 100644
--- a/src/elements/form-field/form-field-clear/form-field-clear.ts
+++ b/src/elements/form-field/form-field-clear/form-field-clear.ts
@@ -5,7 +5,6 @@ import { customElement } from 'lit/decorators.js';
 import { SbbButtonBaseElement } from '../../core/base-elements.js';
 import { SbbConnectedAbortController, SbbLanguageController } from '../../core/controllers.js';
 import { hostAttributes } from '../../core/decorators.js';
-import { hostContext } from '../../core/dom.js';
 import { i18nClearInput } from '../../core/i18n.js';
 import { SbbNegativeMixin } from '../../core/mixins.js';
 import type { SbbFormFieldElement } from '../form-field.js';
@@ -24,7 +23,7 @@ import '../../icon.js';
 export class SbbFormFieldClearElement extends SbbNegativeMixin(SbbButtonBaseElement) {
   public static override styles: CSSResultGroup = style;
 
-  private _formField?: SbbFormFieldElement;
+  private _formField?: SbbFormFieldElement | null;
   private _abort = new SbbConnectedAbortController(this);
   private _language = new SbbLanguageController(this);
 
@@ -32,9 +31,7 @@ export class SbbFormFieldClearElement extends SbbNegativeMixin(SbbButtonBaseElem
     super.connectedCallback();
     const signal = this._abort.signal;
     this.addEventListener('click', () => this._handleClick(), { signal });
-    this._formField =
-      (hostContext('sbb-form-field', this) as SbbFormFieldElement) ??
-      (hostContext('[data-form-field]', this) as SbbFormFieldElement);
+    this._formField = this.closest<SbbFormFieldElement>('sbb-form-field, [data-form-field]');
 
     if (this._formField) {
       this.negative = this._formField.hasAttribute('negative');
diff --git a/src/elements/form-field/form-field/form-field.ts b/src/elements/form-field/form-field/form-field.ts
index 4fb655471c..da36688fb0 100644
--- a/src/elements/form-field/form-field/form-field.ts
+++ b/src/elements/form-field/form-field/form-field.ts
@@ -8,7 +8,7 @@ import { SbbConnectedAbortController, SbbLanguageController } from '../../core/c
 import { slotState } from '../../core/decorators.js';
 import { isFirefox, setOrRemoveAttribute } from '../../core/dom.js';
 import { i18nOptional } from '../../core/i18n.js';
-import { SbbNegativeMixin } from '../../core/mixins.js';
+import { SbbHydrationMixin, SbbNegativeMixin } from '../../core/mixins.js';
 import { AgnosticMutationObserver } from '../../core/observers.js';
 import type { SbbSelectElement } from '../../select.js';
 
@@ -32,7 +32,7 @@ const supportedPopupTagNames = ['sbb-autocomplete', 'sbb-select'];
  */
 @customElement('sbb-form-field')
 @slotState()
-export class SbbFormFieldElement extends SbbNegativeMixin(LitElement) {
+export class SbbFormFieldElement extends SbbNegativeMixin(SbbHydrationMixin(LitElement)) {
   public static override styles: CSSResultGroup = style;
 
   private readonly _supportedNativeInputElements = ['input', 'select', 'textarea'];