Use dynamicElement directive in ha-form (#4317)

* Use dynamicContentDirective

* Turn around

* Remove attributes

* Rename to dynamicElement

src/common/dom/dynamic-element-directive.ts

@@ -1,7 +1,7 @@
 import { directive, Part, NodePart } from "lit-html";
 
-export const dynamicContentDirective = directive(
-  (tag: string, properties: { [key: string]: any }) => (part: Part): void => {
+export const dynamicElement = directive(
+  (tag: string, properties?: { [key: string]: any }) => (part: Part): void => {
     if (!(part instanceof NodePart)) {
       throw new Error(
         "dynamicContentDirective can only be used in content bindings"
@@ -14,16 +14,20 @@ export const dynamicContentDirective = directive(
       element !== undefined &&
       tag.toUpperCase() === (element as HTMLElement).tagName
     ) {
-      Object.entries(properties).forEach(([key, value]) => {
-        element![key] = value;
-      });
+      if (properties) {
+        Object.entries(properties).forEach(([key, value]) => {
+          element![key] = value;
+        });
+      }
       return;
     }
 
     element = document.createElement(tag);
-    Object.entries(properties).forEach(([key, value]) => {
-      element![key] = value;
-    });
+    if (properties) {
+      Object.entries(properties).forEach(([key, value]) => {
+        element![key] = value;
+      });
+    }
     part.setValue(element);
   }
 );

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

@@ -3,10 +3,8 @@ import {
   LitElement,
   html,
   property,
-  query,
   CSSResult,
   css,
-  PropertyValues,
 } from "lit-element";
 
 import "./ha-form-string";
@@ -16,6 +14,7 @@ import "./ha-form-boolean";
 import "./ha-form-select";
 import "./ha-form-positive_time_period_dict";
 import { fireEvent } from "../../common/dom/fire_event";
+import { dynamicElement } from "../../common/dom/dynamic-element-directive";
 
 export type HaFormSchema =
   | HaFormStringSchema
@@ -100,20 +99,14 @@ export class HaForm extends LitElement implements HaFormElement {
   @property() public computeError?: (schema: HaFormSchema, error) => string;
   @property() public computeLabel?: (schema: HaFormSchema) => string;
   @property() public computeSuffix?: (schema: HaFormSchema) => string;
-  @query("ha-form") private _childForm?: HaForm;
-  @query("#element") private _elementContainer?: HTMLDivElement;
 
   public focus() {
-    const input = this._childForm
-      ? this._childForm
-      : this._elementContainer
-      ? this._elementContainer.lastChild
-      : undefined;
-
+    const input =
+      this.shadowRoot!.getElementById("child-form") ||
+      this.shadowRoot!.querySelector("ha-form");
     if (!input) {
       return;
     }
-
     (input as HTMLElement).focus();
   }
 
@@ -151,40 +144,16 @@ export class HaForm extends LitElement implements HaFormElement {
             </div>
           `
         : ""}
-      <div id="element"></div>
+      ${dynamicElement(`ha-form-${this.schema.type}`, {
+        schema: this.schema,
+        data: this.data,
+        label: this._computeLabel(this.schema),
+        suffix: this._computeSuffix(this.schema),
+        id: "child-form",
+      })}
     `;
   }
 
-  protected updated(changedProperties: PropertyValues) {
-    const schemaChanged = changedProperties.has("schema");
-    const oldSchema = schemaChanged
-      ? changedProperties.get("schema")
-      : undefined;
-    if (
-      !Array.isArray(this.schema) &&
-      schemaChanged &&
-      (!oldSchema || (oldSchema as HaFormSchema).type !== this.schema.type)
-    ) {
-      const element = document.createElement(
-        `ha-form-${this.schema.type}`
-      ) as HaFormElement;
-      element.schema = this.schema;
-      element.data = this.data;
-      element.label = this._computeLabel(this.schema);
-      element.suffix = this._computeSuffix(this.schema);
-      if (this._elementContainer!.lastChild) {
-        this._elementContainer!.removeChild(this._elementContainer!.lastChild);
-      }
-      this._elementContainer!.appendChild(element);
-    } else if (this._elementContainer && this._elementContainer.lastChild) {
-      const element = this._elementContainer!.lastChild as HaFormElement;
-      element.schema = this.schema;
-      element.data = this.data;
-      element.label = this._computeLabel(this.schema);
-      element.suffix = this._computeSuffix(this.schema);
-    }
-  }
-
   private _computeLabel(schema: HaFormSchema) {
     return this.computeLabel
       ? this.computeLabel(schema)

src/panels/config/automation/trigger/ha-automation-trigger-row.ts

@@ -12,7 +12,7 @@ import {
   LitElement,
   property,
 } from "lit-element";
-import { dynamicContentDirective } from "../../../../common/dom/dynamic-content-directive";
+import { dynamicElement } from "../../../../common/dom/dynamic-element-directive";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/ha-card";
 import { HomeAssistant } from "../../../../types";
@@ -266,7 +266,7 @@ export default class HaAutomationTriggerRow extends LitElement {
                   </paper-listbox>
                 </paper-dropdown-menu-light>
                 <div>
-                  ${dynamicContentDirective(
+                  ${dynamicElement(
                     `ha-automation-trigger-${this.trigger.platform}`,
                     { hass: this.hass, trigger: this.trigger }
                   )}