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

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;