From 07c7b0736283c0a9384397d97a607fded1d7b17f Mon Sep 17 00:00:00 2001
From: karwosts <32912880+karwosts@users.noreply.github.com>
Date: Tue, 22 Jul 2025 22:33:48 -0700
Subject: [PATCH] Stabilize step flow errors (#26258)

---
 src/dialogs/config-flow/step-flow-form.ts | 29 ++++++++++++++++++++---
 1 file changed, 26 insertions(+), 3 deletions(-)

diff --git a/src/dialogs/config-flow/step-flow-form.ts b/src/dialogs/config-flow/step-flow-form.ts
index ee6ebba201..97d74500ee 100644
--- a/src/dialogs/config-flow/step-flow-form.ts
+++ b/src/dialogs/config-flow/step-flow-form.ts
@@ -37,8 +37,14 @@ class StepFlowForm extends LitElement {
 
   @state() private _stepData?: Record<string, any>;
 
+  @state() private _previewErrors?: Record<string, string>;
+
+  @state() private _submitErrors?: Record<string, string>;
+
   @state() private _errorMsg?: string;
 
+  private _errors?: Record<string, string>;
+
   public disconnectedCallback(): void {
     super.disconnectedCallback();
     this.removeEventListener("keydown", this._handleKeyDown);
@@ -72,7 +78,7 @@ class StepFlowForm extends LitElement {
           .schema=${autocompleteLoginFields(
             this.handleReadOnlyFields(step.data_schema)
           )}
-          .error=${step.errors}
+          .error=${this._errors}
           .computeLabel=${this._labelCallback}
           .computeHelper=${this._helperCallback}
           .computeError=${this._errorCallback}
@@ -119,7 +125,7 @@ class StepFlowForm extends LitElement {
   }
 
   private _setError(ev: CustomEvent) {
-    this.step = { ...this.step, errors: ev.detail };
+    this._previewErrors = ev.detail;
   }
 
   protected firstUpdated(changedProps: PropertyValues) {
@@ -133,6 +139,21 @@ class StepFlowForm extends LitElement {
     if (changedProps.has("step") && this.step?.preview) {
       import(`./previews/flow-preview-${previewModule(this.step.preview)}`);
     }
+
+    if (
+      changedProps.has("step") ||
+      changedProps.has("_previewErrors") ||
+      changedProps.has("_submitErrors")
+    ) {
+      this._errors =
+        this.step.errors || this._previewErrors || this._submitErrors
+          ? {
+              ...this.step.errors,
+              ...this._previewErrors,
+              ...this._submitErrors,
+            }
+          : undefined;
+    }
   }
 
   private _clickHandler(ev: MouseEvent) {
@@ -189,6 +210,7 @@ class StepFlowForm extends LitElement {
 
     this._loading = true;
     this._errorMsg = undefined;
+    this._submitErrors = undefined;
 
     const flowId = this.step.flow_id;
 
@@ -217,6 +239,7 @@ class StepFlowForm extends LitElement {
         return;
       }
 
+      this._previewErrors = undefined;
       fireEvent(this, "flow-update", {
         step,
       });
@@ -226,7 +249,7 @@ class StepFlowForm extends LitElement {
           this._errorMsg = err.body.message;
         }
         if (err.body.errors) {
-          this.step = { ...this.step, errors: err.body.errors };
+          this._submitErrors = err.body.errors;
         }
         if (!err.body.message && !err.body.errors) {
           this._errorMsg = "Unknown error occurred";