Use repeat for ha-form schemas

src/components/ha-form/ha-form.ts

@@ -9,6 +9,7 @@ import {
   TemplateResult,
 } from "lit";
 import { customElement, property } from "lit/decorators";
+import { repeat } from "lit/directives/repeat";
 import { dynamicElement } from "../../common/dom/dynamic-element-directive";
 import { fireEvent } from "../../common/dom/fire_event";
 import { HomeAssistant } from "../../types";
@@ -110,6 +111,16 @@ export class HaForm extends LitElement implements HaFormElement {
     }
   }
 
+  private _schemaKeys = new WeakMap<HaFormSchema, string>();
+
+  private _getSchemaKey(schema: HaFormSchema) {
+    if (!this._schemaKeys.has(schema)) {
+      this._schemaKeys.set(schema, Math.random().toString());
+    }
+
+    return this._schemaKeys.get(schema)!;
+  }
+
   protected render(): TemplateResult {
     return html`
       <div class="root" part="root">
@@ -120,10 +131,12 @@ export class HaForm extends LitElement implements HaFormElement {
               </ha-alert>
             `
           : ""}
-        ${this.schema.map((item) => {
+        ${repeat(
+          this.schema,
+          (item) => this._getSchemaKey(item),
+          (item) => {
             const error = getError(this.error, item);
             const warning = getWarning(this.warning, item);
-
             return html`
               ${error
                 ? html`
@@ -168,7 +181,8 @@ export class HaForm extends LitElement implements HaFormElement {
                     ...this.getFormProperties(),
                   })}
             `;
-        })}
+          }
+        )}
       </div>
     `;
   }