Save height and width when you start filtering to make timing less fragile

Co-authored-by: Paulus Schoutsen <balloob@gmail.com>

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

@@ -87,7 +87,7 @@ export class HaForm extends LitElement implements HaFormElement {
                   .value=${getValue(this.data, item)}
                   .label=${this._computeLabel(item)}
                   .disabled=${this.disabled}
-                  .required=${item.required}
+                  .required=${item.required || false}
                 ></ha-selector>`
               : dynamicElement(`ha-form-${item.type}`, {
                   schema: item,

src/dialogs/config-flow/step-flow-pick-handler.ts

@@ -1,5 +1,3 @@
-import "@polymer/paper-item/paper-icon-item";
-import "@polymer/paper-item/paper-item-body";
 import Fuse from "fuse.js";
 import {
   css,
@@ -22,6 +20,7 @@ import { HomeAssistant } from "../../types";
 import { brandsUrl } from "../../util/brands-url";
 import { documentationUrl } from "../../util/documentation-url";
 import { configFlowContentStyles } from "./styles";
+import "@material/mwc-list/mwc-list-item";
 
 interface HandlerObj {
   name: string;
@@ -97,12 +96,14 @@ class StepFlowPickHandler extends LitElement {
           ? handlers.map(
               (handler: HandlerObj) =>
                 html`
-                  <paper-icon-item
+                  <mwc-list-item
+                    graphic="medium"
+                    hasMeta
                     @click=${this._handlerPicked}
                     .handler=${handler}
                   >
                     <img
-                      slot="item-icon"
+                      slot="graphic"
                       loading="lazy"
                       src=${brandsUrl({
                         domain: handler.slug,
@@ -113,9 +114,9 @@ class StepFlowPickHandler extends LitElement {
                       referrerpolicy="no-referrer"
                     />
 
-                    <paper-item-body> ${handler.name} </paper-item-body>
+                    ${handler.name}
-                    <ha-icon-next></ha-icon-next>
+                    <ha-icon-next slot="meta"></ha-icon-next>
-                  </paper-icon-item>
+                  </mwc-list-item>
                 `
             )
           : html`
@@ -145,10 +146,26 @@ class StepFlowPickHandler extends LitElement {
   }
 
   public willUpdate(changedProps: PropertyValues): void {
+    super.willUpdate(changedProps);
     if (this._filter === undefined && this.initialFilter !== undefined) {
       this._filter = this.initialFilter;
     }
-    super.willUpdate(changedProps);
+    if (this.initialFilter !== undefined && this._filter === "") {
+      this.initialFilter = undefined;
+      this._filter = "";
+      this._width = undefined;
+      this._height = undefined;
+    } else if (
+      this.hasUpdated &&
+      changedProps.has("_filter") &&
+      (!this._width || !this._height)
+    ) {
+      // Store the width and height so that when we search, box doesn't jump
+      const boundingRect =
+        this.shadowRoot!.querySelector("div")!.getBoundingClientRect();
+      this._width = boundingRect.width;
+      this._height = boundingRect.height;
+    }
   }
 
   protected firstUpdated(changedProps) {
@@ -159,24 +176,6 @@ class StepFlowPickHandler extends LitElement {
     );
   }
 
-  protected updated(changedProps) {
-    super.updated(changedProps);
-    // Store the width and height so that when we search, box doesn't jump
-    const div = this.shadowRoot!.querySelector("div")!;
-    if (!this._width) {
-      const width = div.clientWidth;
-      if (width) {
-        this._width = width;
-      }
-    }
-    if (!this._height) {
-      const height = div.clientHeight;
-      if (height) {
-        this._height = height;
-      }
-    }
-  }
-
   private _getHandlers() {
     return this._filterHandlers(
       this.handlers,
@@ -219,7 +218,7 @@ class StepFlowPickHandler extends LitElement {
         }
         search-input {
           display: block;
-          margin: -12px 16px 0;
+          margin: 8px 16px 0;
         }
         ha-icon-next {
           margin-right: 8px;
@@ -236,10 +235,6 @@ class StepFlowPickHandler extends LitElement {
             max-height: calc(100vh - 134px);
           }
         }
-        paper-icon-item {
-          cursor: pointer;
-          margin-bottom: 4px;
-        }
         p {
           text-align: center;
           padding: 16px;

src/dialogs/more-info/ha-more-info-dialog.ts

@@ -352,6 +352,10 @@ export class MoreInfoDialog extends LitElement {
             var(--mdc-dialog-scroll-divider-color, rgba(0, 0, 0, 0.12));
         }
 
+        .content {
+          outline: none;
+        }
+
         @media all and (min-width: 451px) and (min-height: 501px) {
           ha-dialog {
             --mdc-dialog-max-width: 90vw;

src/panels/config/automation/trigger/types/ha-automation-trigger-geo_location.ts

@@ -1,13 +1,12 @@
-import { css, html, LitElement } from "lit";
+import "../../../../../components/ha-form/ha-form";
+import { html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
+import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../../../common/dom/fire_event";
-import "../../../../../components/entity/ha-entity-picker";
+import { HaFormSchema } from "../../../../../components/ha-form/types";
-import type { HaRadio } from "../../../../../components/ha-radio";
 import type { GeoLocationTrigger } from "../../../../../data/automation";
 import type { HomeAssistant } from "../../../../../types";
-import { handleChangeEvent } from "../ha-automation-trigger-row";
+import type { LocalizeFunc } from "../../../../../common/translations/localize";
-
-const includeDomains = ["zone"];
 
 @customElement("ha-automation-trigger-geo_location")
 export class HaGeolocationTrigger extends LitElement {
@@ -15,6 +14,30 @@ export class HaGeolocationTrigger extends LitElement {
 
   @property({ attribute: false }) public trigger!: GeoLocationTrigger;
 
+  private _schema = memoizeOne((localize: LocalizeFunc) => [
+    { name: "source", selector: { text: {} } },
+    { name: "zone", selector: { entity: { domain: "zone" } } },
+    {
+      name: "event",
+      type: "select",
+      required: true,
+      options: [
+        [
+          "enter",
+          localize(
+            "ui.panel.config.automation.editor.triggers.type.geo_location.enter"
+          ),
+        ],
+        [
+          "leave",
+          localize(
+            "ui.panel.config.automation.editor.triggers.type.geo_location.leave"
+          ),
+        ],
+      ],
+    },
+  ]);
+
   public static get defaultConfig() {
     return {
       source: "",
@@ -24,86 +47,27 @@ export class HaGeolocationTrigger extends LitElement {
   }
 
   protected render() {
-    const { source, zone, event } = this.trigger;
-
     return html`
-      <paper-input
+      <ha-form
-        .label=${this.hass.localize(
+        .schema=${this._schema(this.hass.localize)}
-          "ui.panel.config.automation.editor.triggers.type.geo_location.source"
+        .data=${this.trigger}
-        )}
-        name="source"
-        .value=${source}
-        @value-changed=${this._valueChanged}
-      ></paper-input>
-      <ha-entity-picker
-        .label=${this.hass.localize(
-          "ui.panel.config.automation.editor.triggers.type.geo_location.zone"
-        )}
-        .value=${zone}
-        @value-changed=${this._zonePicked}
         .hass=${this.hass}
-        allow-custom-entity
+        .computeLabel=${this._computeLabelCallback}
-        .includeDomains=${includeDomains}
+        @value-changed=${this._valueChanged}
-      ></ha-entity-picker>
+      ></ha-form>
-      <label>
-        ${this.hass.localize(
-          "ui.panel.config.automation.editor.triggers.type.geo_location.event"
-        )}
-        <ha-formfield
-          .label=${this.hass.localize(
-            "ui.panel.config.automation.editor.triggers.type.geo_location.enter"
-          )}
-        >
-          <ha-radio
-            name="event"
-            value="enter"
-            .checked=${event === "enter"}
-            @change=${this._radioGroupPicked}
-          ></ha-radio>
-        </ha-formfield>
-        <ha-formfield
-          .label=${this.hass.localize(
-            "ui.panel.config.automation.editor.triggers.type.geo_location.leave"
-          )}
-        >
-          <ha-radio
-            name="event"
-            value="leave"
-            .checked=${event === "leave"}
-            @change=${this._radioGroupPicked}
-          ></ha-radio>
-        </ha-formfield>
-      </label>
     `;
   }
 
   private _valueChanged(ev: CustomEvent): void {
-    handleChangeEvent(this, ev);
-  }
-
-  private _zonePicked(ev: CustomEvent) {
     ev.stopPropagation();
-    fireEvent(this, "value-changed", {
+    const newTrigger = ev.detail.value;
-      value: { ...this.trigger, zone: ev.detail.value },
+    fireEvent(this, "value-changed", { value: newTrigger });
-    });
   }
 
-  private _radioGroupPicked(ev: CustomEvent) {
+  private _computeLabelCallback = (schema: HaFormSchema): string =>
-    ev.stopPropagation();
+    this.hass.localize(
-    fireEvent(this, "value-changed", {
+      `ui.panel.config.automation.editor.triggers.type.geo_location.${schema.name}`
-      value: {
+    );
-        ...this.trigger,
-        event: (ev.target as HaRadio).value,
-      },
-    });
-  }
-
-  static styles = css`
-    label {
-      display: flex;
-      align-items: center;
-    }
-  `;
 }
 
 declare global {

src/panels/config/automation/trigger/types/ha-automation-trigger-homeassistant.ts

@@ -1,11 +1,12 @@
+import "../../../../../components/ha-form/ha-form";
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
+import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../../../common/dom/fire_event";
-import type { HaRadio } from "../../../../../components/ha-radio";
 import type { HassTrigger } from "../../../../../data/automation";
 import type { HomeAssistant } from "../../../../../types";
-import "../../../../../components/ha-formfield";
+import type { HaFormSchema } from "../../../../../components/ha-form/types";
-import "../../../../../components/ha-radio";
+import type { LocalizeFunc } from "../../../../../common/translations/localize";
 
 @customElement("ha-automation-trigger-homeassistant")
 export class HaHassTrigger extends LitElement {
@@ -13,6 +14,28 @@ export class HaHassTrigger extends LitElement {
 
   @property({ attribute: false }) public trigger!: HassTrigger;
 
+  private _schema = memoizeOne((localize: LocalizeFunc) => [
+    {
+      name: "event",
+      type: "select",
+      required: true,
+      options: [
+        [
+          "start",
+          localize(
+            "ui.panel.config.automation.editor.triggers.type.homeassistant.start"
+          ),
+        ],
+        [
+          "shutdown",
+          localize(
+            "ui.panel.config.automation.editor.triggers.type.homeassistant.shutdown"
+          ),
+        ],
+      ],
+    },
+  ]);
+
   public static get defaultConfig() {
     return {
       event: "start" as HassTrigger["event"],
@@ -20,50 +43,28 @@ export class HaHassTrigger extends LitElement {
   }
 
   protected render() {
-    const { event } = this.trigger;
     return html`
-      <label id="eventlabel">
+      <ha-form
-        ${this.hass.localize(
+        .schema=${this._schema(this.hass.localize)}
-          "ui.panel.config.automation.editor.triggers.type.homeassistant.event"
+        .data=${this.trigger}
-        )}
+        .hass=${this.hass}
-        <ha-formfield
+        .computeLabel=${this._computeLabelCallback}
-          .label=${this.hass.localize(
+        @value-changed=${this._valueChanged}
-            "ui.panel.config.automation.editor.triggers.type.homeassistant.start"
+      ></ha-form>
-          )}
-        >
-          <ha-radio
-            name="event"
-            value="start"
-            .checked=${event === "start"}
-            @change=${this._radioGroupPicked}
-          ></ha-radio>
-        </ha-formfield>
-        <ha-formfield
-          .label=${this.hass.localize(
-            "ui.panel.config.automation.editor.triggers.type.homeassistant.shutdown"
-          )}
-        >
-          <ha-radio
-            name="event"
-            value="shutdown"
-            .checked=${event === "shutdown"}
-            @change=${this._radioGroupPicked}
-          ></ha-radio>
-        </ha-formfield>
-      </label>
     `;
   }
 
-  private _radioGroupPicked(ev) {
+  private _valueChanged(ev: CustomEvent): void {
     ev.stopPropagation();
-    fireEvent(this, "value-changed", {
+    const newTrigger = ev.detail.value;
-      value: {
+    fireEvent(this, "value-changed", { value: newTrigger });
-        ...this.trigger,
-        event: (ev.target as HaRadio).value,
-      },
-    });
   }
 
+  private _computeLabelCallback = (schema: HaFormSchema): string =>
+    this.hass.localize(
+      `ui.panel.config.automation.editor.triggers.type.geo_location.${schema.name}`
+    );
+
   static styles = css`
     label {
       display: flex;

src/panels/config/automation/trigger/types/ha-automation-trigger-mqtt.ts

@@ -1,12 +1,15 @@
-import "@polymer/paper-input/paper-input";
 import { html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
+import { fireEvent } from "../../../../../common/dom/fire_event";
+import type { HaFormSchema } from "../../../../../components/ha-form/types";
 import { MqttTrigger } from "../../../../../data/automation";
 import { HomeAssistant } from "../../../../../types";
-import {
+import type { TriggerElement } from "../ha-automation-trigger-row";
-  handleChangeEvent,
+
-  TriggerElement,
+const SCHEMA: HaFormSchema[] = [
-} from "../ha-automation-trigger-row";
+  { name: "topic", required: true, selector: { text: {} } },
+  { name: "payload", selector: { text: {} } },
+];
 
 @customElement("ha-automation-trigger-mqtt")
 export class HaMQTTTrigger extends LitElement implements TriggerElement {
@@ -19,30 +22,27 @@ export class HaMQTTTrigger extends LitElement implements TriggerElement {
   }
 
   protected render() {
-    const { topic, payload } = this.trigger;
     return html`
-      <paper-input
+      <ha-form
-        .label=${this.hass.localize(
+        .schema=${SCHEMA}
-          "ui.panel.config.automation.editor.triggers.type.mqtt.topic"
+        .data=${this.trigger}
-        )}
+        .hass=${this.hass}
-        name="topic"
+        .computeLabel=${this._computeLabelCallback}
-        .value=${topic}
         @value-changed=${this._valueChanged}
-      ></paper-input>
+      ></ha-form>
-      <paper-input
-        .label=${this.hass.localize(
-          "ui.panel.config.automation.editor.triggers.type.mqtt.payload"
-        )}
-        name="payload"
-        .value=${payload}
-        @value-changed=${this._valueChanged}
-      ></paper-input>
     `;
   }
 
   private _valueChanged(ev: CustomEvent): void {
-    handleChangeEvent(this, ev);
+    ev.stopPropagation();
+    const newTrigger = ev.detail.value;
+    fireEvent(this, "value-changed", { value: newTrigger });
   }
+
+  private _computeLabelCallback = (schema: HaFormSchema): string =>
+    this.hass.localize(
+      `ui.panel.config.automation.editor.triggers.type.mqtt.${schema.name}`
+    );
 }
 
 declare global {

src/panels/config/automation/trigger/types/ha-automation-trigger-state.ts

@@ -34,13 +34,10 @@ const stateTriggerStruct = assign(
 
 const SCHEMA = [
   { name: "entity_id", selector: { entity: {} } },
-  {
+  { name: "attribute", selector: { attribute: { entity_id: "" } } },
-    name: "attribute",
+  { name: "from", required: false, selector: { text: {} } },
-    selector: { attribute: { entity_id: "" } },
+  { name: "to", required: false, selector: { text: {} } },
-  },
+  { name: "for", required: false, selector: { duration: {} } },
-  { name: "from", selector: { text: {} } },
-  { name: "to", selector: { text: {} } },
-  { name: "for", selector: { duration: {} } },
 ];
 
 @customElement("ha-automation-trigger-state")

src/panels/config/automation/trigger/types/ha-automation-trigger-sun.ts

@@ -1,16 +1,12 @@
-import "@polymer/paper-input/paper-input";
+import { html, LitElement } from "lit";
-import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
+import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../../../common/dom/fire_event";
-import "../../../../../components/ha-radio";
-import "../../../../../components/ha-formfield";
-import type { HaRadio } from "../../../../../components/ha-radio";
 import type { SunTrigger } from "../../../../../data/automation";
 import type { HomeAssistant } from "../../../../../types";
-import {
+import type { TriggerElement } from "../ha-automation-trigger-row";
-  handleChangeEvent,
+import type { HaFormSchema } from "../../../../../components/ha-form/types";
-  TriggerElement,
+import type { LocalizeFunc } from "../../../../../common/translations/localize";
-} from "../ha-automation-trigger-row";
 
 @customElement("ha-automation-trigger-sun")
 export class HaSunTrigger extends LitElement implements TriggerElement {
@@ -18,6 +14,29 @@ export class HaSunTrigger extends LitElement implements TriggerElement {
 
   @property({ attribute: false }) public trigger!: SunTrigger;
 
+  private _schema = memoizeOne((localize: LocalizeFunc) => [
+    {
+      name: "event",
+      type: "select",
+      required: true,
+      options: [
+        [
+          "sunrise",
+          localize(
+            "ui.panel.config.automation.editor.triggers.type.sun.sunrise"
+          ),
+        ],
+        [
+          "sunset",
+          localize(
+            "ui.panel.config.automation.editor.triggers.type.sun.sunset"
+          ),
+        ],
+      ],
+    },
+    { name: "offset", selector: { text: {} } },
+  ]);
+
   public static get defaultConfig() {
     return {
       event: "sunrise" as SunTrigger["event"],
@@ -26,69 +45,27 @@ export class HaSunTrigger extends LitElement implements TriggerElement {
   }
 
   protected render() {
-    const { offset, event } = this.trigger;
     return html`
-      <label>
+      <ha-form
-        ${this.hass.localize(
+        .schema=${this._schema(this.hass.localize)}
-          "ui.panel.config.automation.editor.triggers.type.sun.event"
+        .data=${this.trigger}
-        )}
+        .hass=${this.hass}
-        <ha-formfield
+        .computeLabel=${this._computeLabelCallback}
-          .label=${this.hass.localize(
-            "ui.panel.config.automation.editor.triggers.type.sun.sunrise"
-          )}
-        >
-          <ha-radio
-            name="event"
-            value="sunrise"
-            .checked=${event === "sunrise"}
-            @change=${this._radioGroupPicked}
-          ></ha-radio>
-        </ha-formfield>
-        <ha-formfield
-          .label=${this.hass.localize(
-            "ui.panel.config.automation.editor.triggers.type.sun.sunset"
-          )}
-        >
-          <ha-radio
-            name="event"
-            value="sunset"
-            .checked=${event === "sunset"}
-            @change=${this._radioGroupPicked}
-          ></ha-radio>
-        </ha-formfield>
-      </label>
-
-      <paper-input
-        .label=${this.hass.localize(
-          "ui.panel.config.automation.editor.triggers.type.sun.offset"
-        )}
-        name="offset"
-        .value=${offset}
         @value-changed=${this._valueChanged}
-      ></paper-input>
+      ></ha-form>
     `;
   }
 
   private _valueChanged(ev: CustomEvent): void {
-    handleChangeEvent(this, ev);
-  }
-
-  private _radioGroupPicked(ev) {
     ev.stopPropagation();
-    fireEvent(this, "value-changed", {
+    const newTrigger = ev.detail.value;
-      value: {
+    fireEvent(this, "value-changed", { value: newTrigger });
-        ...this.trigger,
-        event: (ev.target as HaRadio).value,
-      },
-    });
   }
 
-  static styles = css`
+  private _computeLabelCallback = (schema: HaFormSchema): string =>
-    label {
+    this.hass.localize(
-      display: flex;
+      `ui.panel.config.automation.editor.triggers.type.sun.${schema.name}`
-      align-items: center;
+    );
-    }
-  `;
 }
 
 declare global {

src/panels/config/automation/trigger/types/ha-automation-trigger-time_pattern.ts

@@ -1,12 +1,16 @@
-import "@polymer/paper-input/paper-input";
 import { html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
-import { TimePatternTrigger } from "../../../../../data/automation";
+import { fireEvent } from "../../../../../common/dom/fire_event";
-import { HomeAssistant } from "../../../../../types";
+import type { HaFormSchema } from "../../../../../components/ha-form/types";
-import {
+import type { TimePatternTrigger } from "../../../../../data/automation";
-  handleChangeEvent,
+import type { HomeAssistant } from "../../../../../types";
-  TriggerElement,
+import type { TriggerElement } from "../ha-automation-trigger-row";
-} from "../ha-automation-trigger-row";
+
+const SCHEMA: HaFormSchema[] = [
+  { name: "hours", selector: { text: {} } },
+  { name: "minutes", selector: { text: {} } },
+  { name: "seconds", selector: { text: {} } },
+];
 
 @customElement("ha-automation-trigger-time_pattern")
 export class HaTimePatternTrigger extends LitElement implements TriggerElement {
@@ -19,38 +23,27 @@ export class HaTimePatternTrigger extends LitElement implements TriggerElement {
   }
 
   protected render() {
-    const { hours, minutes, seconds } = this.trigger;
     return html`
-      <paper-input
+      <ha-form
-        .label=${this.hass.localize(
+        .hass=${this.hass}
-          "ui.panel.config.automation.editor.triggers.type.time_pattern.hours"
+        .schema=${SCHEMA}
-        )}
+        .data=${this.trigger}
-        name="hours"
+        .computeLabel=${this._computeLabelCallback}
-        .value=${hours}
         @value-changed=${this._valueChanged}
-      ></paper-input>
+      ></ha-form>
-      <paper-input
-        .label=${this.hass.localize(
-          "ui.panel.config.automation.editor.triggers.type.time_pattern.minutes"
-        )}
-        name="minutes"
-        .value=${minutes}
-        @value-changed=${this._valueChanged}
-      ></paper-input>
-      <paper-input
-        .label=${this.hass.localize(
-          "ui.panel.config.automation.editor.triggers.type.time_pattern.seconds"
-        )}
-        name="seconds"
-        .value=${seconds}
-        @value-changed=${this._valueChanged}
-      ></paper-input>
     `;
   }
 
   private _valueChanged(ev: CustomEvent): void {
-    handleChangeEvent(this, ev);
+    ev.stopPropagation();
+    const newTrigger = ev.detail.value;
+    fireEvent(this, "value-changed", { value: newTrigger });
   }
+
+  private _computeLabelCallback = (schema: HaFormSchema): string =>
+    this.hass.localize(
+      `ui.panel.config.automation.editor.triggers.type.time_pattern.${schema.name}`
+    );
 }
 
 declare global {