From 21e441b682ae2fd6c6862f24e4faf8773311fe72 Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Fri, 11 Feb 2022 17:10:56 +0100
Subject: [PATCH] Save height and width when you start filtering to make timing
 less fragile

---
 .../config-flow/step-flow-pick-handler.ts     | 34 +++++++++----------
 1 file changed, 17 insertions(+), 17 deletions(-)

diff --git a/src/dialogs/config-flow/step-flow-pick-handler.ts b/src/dialogs/config-flow/step-flow-pick-handler.ts
index f6b8e5dfeb..66d9700293 100644
--- a/src/dialogs/config-flow/step-flow-pick-handler.ts
+++ b/src/dialogs/config-flow/step-flow-pick-handler.ts
@@ -21,7 +21,6 @@ import { brandsUrl } from "../../util/brands-url";
 import { documentationUrl } from "../../util/documentation-url";
 import { configFlowContentStyles } from "./styles";
 import "@material/mwc-list/mwc-list-item";
-import { afterNextRender } from "../../common/util/render-status";
 
 interface HandlerObj {
   name: string;
@@ -147,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) {
@@ -161,21 +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
-    if (!this._width || !this._height) {
-      this.updateComplete.then(() => {
-        afterNextRender(() => {
-          const boundingRect =
-            this.shadowRoot!.querySelector("div")!.getBoundingClientRect();
-          this._width = boundingRect.width;
-          this._height = boundingRect.height;
-        });
-      });
-    }
-  }
-
   private _getHandlers() {
     return this._filterHandlers(
       this.handlers,