From cf03e041a86f4ef77a2af310760405e7ec9be5f5 Mon Sep 17 00:00:00 2001
From: Paul Bottein <paul.bottein@gmail.com>
Date: Wed, 18 Jun 2025 17:57:11 +0200
Subject: [PATCH] Fix combobox helper (#25834)

* Fix combobox helper

* Pass disabled to all helpers
---
 src/components/ha-base-time-input.ts              |  4 +++-
 src/components/ha-combo-box.ts                    | 15 +++++++++++++--
 src/components/ha-form/ha-form-integer.ts         |  4 +++-
 src/components/ha-input-helper-text.ts            |  5 +++++
 src/components/ha-labeled-slider.ts               |  4 +++-
 .../ha-selector/ha-selector-datetime.ts           |  4 +++-
 src/components/ha-selector/ha-selector-number.ts  |  4 +++-
 src/components/ha-selector/ha-selector-object.ts  |  4 +++-
 src/components/ha-selector/ha-selector-select.ts  |  4 +++-
 .../ha-selector/ha-selector-template.ts           |  4 +++-
 src/components/ha-target-picker.ts                |  4 +++-
 11 files changed, 45 insertions(+), 11 deletions(-)

diff --git a/src/components/ha-base-time-input.ts b/src/components/ha-base-time-input.ts
index eae4ccc306..674d36ca49 100644
--- a/src/components/ha-base-time-input.ts
+++ b/src/components/ha-base-time-input.ts
@@ -271,7 +271,9 @@ export class HaBaseTimeInput extends LitElement {
             </ha-select>`}
       </div>
       ${this.helper
-        ? html`<ha-input-helper-text>${this.helper}</ha-input-helper-text>`
+        ? html`<ha-input-helper-text .disabled=${this.disabled}
+            >${this.helper}</ha-input-helper-text
+          >`
         : nothing}
     `;
   }
diff --git a/src/components/ha-combo-box.ts b/src/components/ha-combo-box.ts
index ab5ecfe4c3..bcdc9077e7 100644
--- a/src/components/ha-combo-box.ts
+++ b/src/components/ha-combo-box.ts
@@ -19,6 +19,7 @@ import type { HomeAssistant } from "../types";
 import "./ha-combo-box-item";
 import "./ha-combo-box-textfield";
 import "./ha-icon-button";
+import "./ha-input-helper-text";
 import "./ha-textfield";
 import type { HaTextField } from "./ha-textfield";
 
@@ -195,8 +196,6 @@ export class HaComboBox extends LitElement {
           ></div>`}
           .icon=${this.icon}
           .invalid=${this.invalid}
-          .helper=${this.helper}
-          helperPersistent
           .disableSetValue=${this._disableSetValue}
         >
           <slot name="icon" slot="leadingIcon"></slot>
@@ -222,9 +221,18 @@ export class HaComboBox extends LitElement {
           @click=${this._toggleOpen}
         ></ha-svg-icon>
       </vaadin-combo-box-light>
+      ${this._renderHelper()}
     `;
   }
 
+  private _renderHelper() {
+    return this.helper
+      ? html`<ha-input-helper-text .disabled=${this.disabled}
+          >${this.helper}</ha-input-helper-text
+        >`
+      : "";
+  }
+
   private _defaultRowRenderer: ComboBoxLitRenderer<
     string | Record<string, any>
   > = (item) => html`
@@ -398,6 +406,9 @@ export class HaComboBox extends LitElement {
       inset-inline-end: 36px;
       direction: var(--direction);
     }
+    ha-input-helper-text {
+      margin-top: 4px;
+    }
   `;
 }
 
diff --git a/src/components/ha-form/ha-form-integer.ts b/src/components/ha-form/ha-form-integer.ts
index 777056c184..9bcd93d3be 100644
--- a/src/components/ha-form/ha-form-integer.ts
+++ b/src/components/ha-form/ha-form-integer.ts
@@ -71,7 +71,9 @@ export class HaFormInteger extends LitElement implements HaFormElement {
             ></ha-slider>
           </div>
           ${this.helper
-            ? html`<ha-input-helper-text>${this.helper}</ha-input-helper-text>`
+            ? html`<ha-input-helper-text .disabled=${this.disabled}
+                >${this.helper}</ha-input-helper-text
+              >`
             : ""}
         </div>
       `;
diff --git a/src/components/ha-input-helper-text.ts b/src/components/ha-input-helper-text.ts
index 6d817d1bf6..86ba8cb280 100644
--- a/src/components/ha-input-helper-text.ts
+++ b/src/components/ha-input-helper-text.ts
@@ -19,6 +19,11 @@ class InputHelperText extends LitElement {
       padding-right: 16px;
       padding-inline-start: 16px;
       padding-inline-end: 16px;
+      letter-spacing: var(
+        --mdc-typography-caption-letter-spacing,
+        0.0333333333em
+      );
+      line-height: normal;
     }
     :host([disabled]) {
       color: var(--mdc-text-field-disabled-ink-color, rgba(0, 0, 0, 0.6));
diff --git a/src/components/ha-labeled-slider.ts b/src/components/ha-labeled-slider.ts
index 483d5aefd6..7c473fc5c1 100644
--- a/src/components/ha-labeled-slider.ts
+++ b/src/components/ha-labeled-slider.ts
@@ -47,7 +47,9 @@ class HaLabeledSlider extends LitElement {
         ></ha-slider>
       </div>
       ${this.helper
-        ? html`<ha-input-helper-text> ${this.helper} </ha-input-helper-text>`
+        ? html`<ha-input-helper-text .disabled=${this.disabled}>
+            ${this.helper}
+          </ha-input-helper-text>`
         : nothing}
     `;
   }
diff --git a/src/components/ha-selector/ha-selector-datetime.ts b/src/components/ha-selector/ha-selector-datetime.ts
index 1c5e2bf8db..3f0c4f544d 100644
--- a/src/components/ha-selector/ha-selector-datetime.ts
+++ b/src/components/ha-selector/ha-selector-datetime.ts
@@ -54,7 +54,9 @@ export class HaDateTimeSelector extends LitElement {
         ></ha-time-input>
       </div>
       ${this.helper
-        ? html`<ha-input-helper-text>${this.helper}</ha-input-helper-text>`
+        ? html`<ha-input-helper-text .disabled=${this.disabled}
+            >${this.helper}</ha-input-helper-text
+          >`
         : ""}
     `;
   }
diff --git a/src/components/ha-selector/ha-selector-number.ts b/src/components/ha-selector/ha-selector-number.ts
index 3249f96aad..66fed152d9 100644
--- a/src/components/ha-selector/ha-selector-number.ts
+++ b/src/components/ha-selector/ha-selector-number.ts
@@ -106,7 +106,9 @@ export class HaNumberSelector extends LitElement {
         </ha-textfield>
       </div>
       ${!isBox && this.helper
-        ? html`<ha-input-helper-text>${this.helper}</ha-input-helper-text>`
+        ? html`<ha-input-helper-text .disabled=${this.disabled}
+            >${this.helper}</ha-input-helper-text
+          >`
         : nothing}
     `;
   }
diff --git a/src/components/ha-selector/ha-selector-object.ts b/src/components/ha-selector/ha-selector-object.ts
index e328112f35..f2b9040b20 100644
--- a/src/components/ha-selector/ha-selector-object.ts
+++ b/src/components/ha-selector/ha-selector-object.ts
@@ -38,7 +38,9 @@ export class HaObjectSelector extends LitElement {
         @value-changed=${this._handleChange}
       ></ha-yaml-editor>
       ${this.helper
-        ? html`<ha-input-helper-text>${this.helper}</ha-input-helper-text>`
+        ? html`<ha-input-helper-text .disabled=${this.disabled}
+            >${this.helper}</ha-input-helper-text
+          >`
         : ""} `;
   }
 
diff --git a/src/components/ha-selector/ha-selector-select.ts b/src/components/ha-selector/ha-selector-select.ts
index c136290114..f6b31bc33d 100644
--- a/src/components/ha-selector/ha-selector-select.ts
+++ b/src/components/ha-selector/ha-selector-select.ts
@@ -285,7 +285,9 @@ export class HaSelectSelector extends LitElement {
 
   private _renderHelper() {
     return this.helper
-      ? html`<ha-input-helper-text>${this.helper}</ha-input-helper-text>`
+      ? html`<ha-input-helper-text .disabled=${this.disabled}
+          >${this.helper}</ha-input-helper-text
+        >`
       : "";
   }
 
diff --git a/src/components/ha-selector/ha-selector-template.ts b/src/components/ha-selector/ha-selector-template.ts
index 50f6e039ed..555f09bd17 100644
--- a/src/components/ha-selector/ha-selector-template.ts
+++ b/src/components/ha-selector/ha-selector-template.ts
@@ -63,7 +63,9 @@ export class HaTemplateSelector extends LitElement {
         linewrap
       ></ha-code-editor>
       ${this.helper
-        ? html`<ha-input-helper-text>${this.helper}</ha-input-helper-text>`
+        ? html`<ha-input-helper-text .disabled=${this.disabled}
+            >${this.helper}</ha-input-helper-text
+          >`
         : nothing}
     `;
   }
diff --git a/src/components/ha-target-picker.ts b/src/components/ha-target-picker.ts
index 01624644ae..0f5a4ae05c 100644
--- a/src/components/ha-target-picker.ts
+++ b/src/components/ha-target-picker.ts
@@ -289,7 +289,9 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
         ${this._renderPicker()}
       </div>
       ${this.helper
-        ? html`<ha-input-helper-text>${this.helper}</ha-input-helper-text>`
+        ? html`<ha-input-helper-text .disabled=${this.disabled}
+            >${this.helper}</ha-input-helper-text
+          >`
         : ""}
     `;
   }