From e7c47ef65c5ada5022594f47cd7a3a0275c6ded1 Mon Sep 17 00:00:00 2001
From: karwosts <32912880+karwosts@users.noreply.github.com>
Date: Fri, 30 Jun 2023 08:06:46 -0700
Subject: [PATCH] Name field in helper forms should not init in the error state
 (#17111)

---
 src/panels/config/helpers/forms/ha-counter-form.ts        | 6 +++---
 src/panels/config/helpers/forms/ha-input_boolean-form.ts  | 6 +++---
 src/panels/config/helpers/forms/ha-input_button-form.ts   | 6 +++---
 src/panels/config/helpers/forms/ha-input_datetime-form.ts | 6 +++---
 src/panels/config/helpers/forms/ha-input_number-form.ts   | 6 +++---
 src/panels/config/helpers/forms/ha-input_select-form.ts   | 6 +++---
 src/panels/config/helpers/forms/ha-input_text-form.ts     | 6 +++---
 src/panels/config/helpers/forms/ha-schedule-form.ts       | 6 +++---
 src/panels/config/helpers/forms/ha-timer-form.ts          | 6 +++---
 9 files changed, 27 insertions(+), 27 deletions(-)

diff --git a/src/panels/config/helpers/forms/ha-counter-form.ts b/src/panels/config/helpers/forms/ha-counter-form.ts
index 58af320e52..92c844af88 100644
--- a/src/panels/config/helpers/forms/ha-counter-form.ts
+++ b/src/panels/config/helpers/forms/ha-counter-form.ts
@@ -64,7 +64,6 @@ class HaCounterForm extends LitElement {
     if (!this.hass) {
       return nothing;
     }
-    const nameInvalid = !this._name || this._name.trim() === "";
 
     return html`
       <div class="form">
@@ -75,10 +74,11 @@ class HaCounterForm extends LitElement {
           .label=${this.hass!.localize(
             "ui.dialogs.helper_settings.generic.name"
           )}
-          .errorMessage=${this.hass!.localize(
+          autoValidate
+          required
+          .validationMessage=${this.hass!.localize(
             "ui.dialogs.helper_settings.required_error_msg"
           )}
-          .invalid=${nameInvalid}
           dialogInitialFocus
         ></ha-textfield>
         <ha-icon-picker
diff --git a/src/panels/config/helpers/forms/ha-input_boolean-form.ts b/src/panels/config/helpers/forms/ha-input_boolean-form.ts
index 945954ca0e..82912b4552 100644
--- a/src/panels/config/helpers/forms/ha-input_boolean-form.ts
+++ b/src/panels/config/helpers/forms/ha-input_boolean-form.ts
@@ -42,7 +42,6 @@ class HaInputBooleanForm extends LitElement {
     if (!this.hass) {
       return nothing;
     }
-    const nameInvalid = !this._name || this._name.trim() === "";
 
     return html`
       <div class="form">
@@ -53,10 +52,11 @@ class HaInputBooleanForm extends LitElement {
           .label=${this.hass!.localize(
             "ui.dialogs.helper_settings.generic.name"
           )}
-          .errorMessage=${this.hass!.localize(
+          autoValidate
+          required
+          .validationMessage=${this.hass!.localize(
             "ui.dialogs.helper_settings.required_error_msg"
           )}
-          .invalid=${nameInvalid}
           dialogInitialFocus
         ></ha-textfield>
         <ha-icon-picker
diff --git a/src/panels/config/helpers/forms/ha-input_button-form.ts b/src/panels/config/helpers/forms/ha-input_button-form.ts
index 3c78370228..a67b65d5d3 100644
--- a/src/panels/config/helpers/forms/ha-input_button-form.ts
+++ b/src/panels/config/helpers/forms/ha-input_button-form.ts
@@ -42,7 +42,6 @@ class HaInputButtonForm extends LitElement {
     if (!this.hass) {
       return nothing;
     }
-    const nameInvalid = !this._name || this._name.trim() === "";
 
     return html`
       <div class="form">
@@ -53,10 +52,11 @@ class HaInputButtonForm extends LitElement {
           .label=${this.hass!.localize(
             "ui.dialogs.helper_settings.generic.name"
           )}
-          .errorMessage=${this.hass!.localize(
+          autoValidate
+          required
+          .validationMessage=${this.hass!.localize(
             "ui.dialogs.helper_settings.required_error_msg"
           )}
-          .invalid=${nameInvalid}
           dialogInitialFocus
         ></ha-textfield>
         <ha-icon-picker
diff --git a/src/panels/config/helpers/forms/ha-input_datetime-form.ts b/src/panels/config/helpers/forms/ha-input_datetime-form.ts
index e427d9405d..61e70d735a 100644
--- a/src/panels/config/helpers/forms/ha-input_datetime-form.ts
+++ b/src/panels/config/helpers/forms/ha-input_datetime-form.ts
@@ -56,7 +56,6 @@ class HaInputDateTimeForm extends LitElement {
     if (!this.hass) {
       return nothing;
     }
-    const nameInvalid = !this._name || this._name.trim() === "";
 
     return html`
       <div class="form">
@@ -67,10 +66,11 @@ class HaInputDateTimeForm extends LitElement {
           .label=${this.hass!.localize(
             "ui.dialogs.helper_settings.generic.name"
           )}
-          .errorMessage=${this.hass!.localize(
+          autoValidate
+          required
+          .validationMessage=${this.hass!.localize(
             "ui.dialogs.helper_settings.required_error_msg"
           )}
-          .invalid=${nameInvalid}
           dialogInitialFocus
         ></ha-textfield>
         <ha-icon-picker
diff --git a/src/panels/config/helpers/forms/ha-input_number-form.ts b/src/panels/config/helpers/forms/ha-input_number-form.ts
index ac7b301352..f090713f72 100644
--- a/src/panels/config/helpers/forms/ha-input_number-form.ts
+++ b/src/panels/config/helpers/forms/ha-input_number-form.ts
@@ -71,7 +71,6 @@ class HaInputNumberForm extends LitElement {
     if (!this.hass) {
       return nothing;
     }
-    const nameInvalid = !this._name || this._name.trim() === "";
 
     return html`
       <div class="form">
@@ -82,10 +81,11 @@ class HaInputNumberForm extends LitElement {
           .label=${this.hass!.localize(
             "ui.dialogs.helper_settings.generic.name"
           )}
-          .errorMessage=${this.hass!.localize(
+          autoValidate
+          required
+          .validationMessage=${this.hass!.localize(
             "ui.dialogs.helper_settings.required_error_msg"
           )}
-          .invalid=${nameInvalid}
           dialogInitialFocus
         ></ha-textfield>
         <ha-icon-picker
diff --git a/src/panels/config/helpers/forms/ha-input_select-form.ts b/src/panels/config/helpers/forms/ha-input_select-form.ts
index 95bee14710..378c6aa179 100644
--- a/src/panels/config/helpers/forms/ha-input_select-form.ts
+++ b/src/panels/config/helpers/forms/ha-input_select-form.ts
@@ -54,20 +54,20 @@ class HaInputSelectForm extends LitElement {
     if (!this.hass) {
       return nothing;
     }
-    const nameInvalid = !this._name || this._name.trim() === "";
 
     return html`
       <div class="form">
         <ha-textfield
           dialogInitialFocus
-          .errorMessage=${this.hass!.localize(
+          autoValidate
+          required
+          .validationMessage=${this.hass!.localize(
             "ui.dialogs.helper_settings.required_error_msg"
           )}
           .value=${this._name}
           .label=${this.hass!.localize(
             "ui.dialogs.helper_settings.generic.name"
           )}
-          .invalid=${nameInvalid}
           .configValue=${"name"}
           @input=${this._valueChanged}
         ></ha-textfield>
diff --git a/src/panels/config/helpers/forms/ha-input_text-form.ts b/src/panels/config/helpers/forms/ha-input_text-form.ts
index c978c3f520..d8ba12b444 100644
--- a/src/panels/config/helpers/forms/ha-input_text-form.ts
+++ b/src/panels/config/helpers/forms/ha-input_text-form.ts
@@ -61,7 +61,6 @@ class HaInputTextForm extends LitElement {
     if (!this.hass) {
       return nothing;
     }
-    const nameInvalid = !this._name || this._name.trim() === "";
 
     return html`
       <div class="form">
@@ -72,10 +71,11 @@ class HaInputTextForm extends LitElement {
           .label=${this.hass!.localize(
             "ui.dialogs.helper_settings.generic.name"
           )}
-          .errorMessage=${this.hass!.localize(
+          autoValidate
+          required
+          .validationMessage=${this.hass!.localize(
             "ui.dialogs.helper_settings.required_error_msg"
           )}
-          .invalid=${nameInvalid}
           dialogInitialFocus
         ></ha-textfield>
         <ha-icon-picker
diff --git a/src/panels/config/helpers/forms/ha-schedule-form.ts b/src/panels/config/helpers/forms/ha-schedule-form.ts
index e3116d5b21..52c5dcf278 100644
--- a/src/panels/config/helpers/forms/ha-schedule-form.ts
+++ b/src/panels/config/helpers/forms/ha-schedule-form.ts
@@ -141,7 +141,6 @@ class HaScheduleForm extends LitElement {
     if (!this.hass) {
       return nothing;
     }
-    const nameInvalid = !this._name || this._name.trim() === "";
 
     return html`
       <div class="form">
@@ -152,10 +151,11 @@ class HaScheduleForm extends LitElement {
           .label=${this.hass!.localize(
             "ui.dialogs.helper_settings.generic.name"
           )}
-          .errorMessage=${this.hass!.localize(
+          autoValidate
+          required
+          .validationMessage=${this.hass!.localize(
             "ui.dialogs.helper_settings.required_error_msg"
           )}
-          .invalid=${nameInvalid}
           dialogInitialFocus
         ></ha-textfield>
         <ha-icon-picker
diff --git a/src/panels/config/helpers/forms/ha-timer-form.ts b/src/panels/config/helpers/forms/ha-timer-form.ts
index a19362f37d..1d427ef7af 100644
--- a/src/panels/config/helpers/forms/ha-timer-form.ts
+++ b/src/panels/config/helpers/forms/ha-timer-form.ts
@@ -50,7 +50,6 @@ class HaTimerForm extends LitElement {
     if (!this.hass) {
       return nothing;
     }
-    const nameInvalid = !this._name || this._name.trim() === "";
 
     return html`
       <div class="form">
@@ -61,10 +60,11 @@ class HaTimerForm extends LitElement {
           .label=${this.hass!.localize(
             "ui.dialogs.helper_settings.generic.name"
           )}
-          .errorMessage=${this.hass!.localize(
+          autoValidate
+          required
+          .validationMessage=${this.hass!.localize(
             "ui.dialogs.helper_settings.required_error_msg"
           )}
-          .invalid=${nameInvalid}
           dialogInitialFocus
         ></ha-textfield>
         <ha-icon-picker