From 392faa65ea066636ba717eaa2257f50c31264379 Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Mon, 28 Feb 2022 20:09:05 +0100
Subject: [PATCH 1/2] Fix quickbar items overlapping

---
 src/dialogs/quick-bar/ha-quick-bar.ts | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/src/dialogs/quick-bar/ha-quick-bar.ts b/src/dialogs/quick-bar/ha-quick-bar.ts
index 337855d71b48..5c565febaead 100644
--- a/src/dialogs/quick-bar/ha-quick-bar.ts
+++ b/src/dialogs/quick-bar/ha-quick-bar.ts
@@ -1,4 +1,5 @@
 import "@lit-labs/virtualizer";
+import type { LitVirtualizer } from "@lit-labs/virtualizer";
 import "@material/mwc-list/mwc-list";
 import "@material/mwc-list/mwc-list-item";
 import type { ListItem } from "@material/mwc-list/mwc-list-item";
@@ -28,6 +29,7 @@ import {
   ScorableTextItem,
 } from "../../common/string/filter/sequence-matching";
 import { debounce } from "../../common/util/debounce";
+import { afterNextRender } from "../../common/util/render-status";
 import "../../components/ha-chip";
 import "../../components/ha-circular-progress";
 import "../../components/ha-header-bar";
@@ -98,6 +100,8 @@ export class QuickBar extends LitElement {
 
   @query("ha-textfield", false) private _filterInputField?: HTMLElement;
 
+  @query("lit-virtualizer", false) private _virtualizer?: LitVirtualizer;
+
   private _focusSet = false;
 
   private _focusListElement?: ListItem | null;
@@ -121,6 +125,19 @@ export class QuickBar extends LitElement {
     fireEvent(this, "dialog-closed", { dialog: this.localName });
   }
 
+  protected updated() {
+    const virtualizer = this._virtualizer;
+    if (!virtualizer) {
+      return;
+    }
+    virtualizer.updateComplete.then(() => {
+      afterNextRender(() => {
+        virtualizer.scrollToIndex(9999999);
+        virtualizer.scrollToIndex(0);
+      });
+    });
+  }
+
   private _getItems = memoizeOne(
     (commandMode: boolean, commandItems, entityItems, filter: string) => {
       const items = commandMode ? commandItems : entityItems;

From e161e597b4b637893442d2d1392ee27425c16bb3 Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Wed, 2 Mar 2022 16:48:26 +0100
Subject: [PATCH 2/2] Render virtual list after dialog animation finishes

---
 src/dialogs/quick-bar/ha-quick-bar.ts | 74 +++++++++++----------------
 1 file changed, 29 insertions(+), 45 deletions(-)

diff --git a/src/dialogs/quick-bar/ha-quick-bar.ts b/src/dialogs/quick-bar/ha-quick-bar.ts
index 5c565febaead..3a7b3aaa9631 100644
--- a/src/dialogs/quick-bar/ha-quick-bar.ts
+++ b/src/dialogs/quick-bar/ha-quick-bar.ts
@@ -1,5 +1,4 @@
 import "@lit-labs/virtualizer";
-import type { LitVirtualizer } from "@lit-labs/virtualizer";
 import "@material/mwc-list/mwc-list";
 import "@material/mwc-list/mwc-list-item";
 import type { ListItem } from "@material/mwc-list/mwc-list-item";
@@ -29,7 +28,6 @@ import {
   ScorableTextItem,
 } from "../../common/string/filter/sequence-matching";
 import { debounce } from "../../common/util/debounce";
-import { afterNextRender } from "../../common/util/render-status";
 import "../../components/ha-chip";
 import "../../components/ha-circular-progress";
 import "../../components/ha-header-bar";
@@ -88,11 +86,11 @@ export class QuickBar extends LitElement {
 
   @state() private _search = "";
 
-  @state() private _opened = false;
+  @state() private _open = false;
 
   @state() private _commandMode = false;
 
-  @state() private _done = false;
+  @state() private _opened = false;
 
   @state() private _narrow = false;
 
@@ -100,8 +98,6 @@ export class QuickBar extends LitElement {
 
   @query("ha-textfield", false) private _filterInputField?: HTMLElement;
 
-  @query("lit-virtualizer", false) private _virtualizer?: LitVirtualizer;
-
   private _focusSet = false;
 
   private _focusListElement?: ListItem | null;
@@ -113,31 +109,18 @@ export class QuickBar extends LitElement {
       "all and (max-width: 450px), all and (max-height: 500px)"
     ).matches;
     this._initializeItemsIfNeeded();
-    this._opened = true;
+    this._open = true;
   }
 
   public closeDialog() {
+    this._open = false;
     this._opened = false;
-    this._done = false;
     this._focusSet = false;
     this._filter = "";
     this._search = "";
     fireEvent(this, "dialog-closed", { dialog: this.localName });
   }
 
-  protected updated() {
-    const virtualizer = this._virtualizer;
-    if (!virtualizer) {
-      return;
-    }
-    virtualizer.updateComplete.then(() => {
-      afterNextRender(() => {
-        virtualizer.scrollToIndex(9999999);
-        virtualizer.scrollToIndex(0);
-      });
-    });
-  }
-
   private _getItems = memoizeOne(
     (commandMode: boolean, commandItems, entityItems, filter: string) => {
       const items = commandMode ? commandItems : entityItems;
@@ -150,7 +133,7 @@ export class QuickBar extends LitElement {
   );
 
   protected render() {
-    if (!this._opened) {
+    if (!this._open) {
       return html``;
     }
 
@@ -235,24 +218,26 @@ export class QuickBar extends LitElement {
             `
           : html`
               <mwc-list>
-                <lit-virtualizer
-                  scroller
-                  @keydown=${this._handleListItemKeyDown}
-                  @rangechange=${this._handleRangeChanged}
-                  @click=${this._handleItemClick}
-                  class="ha-scrollbar"
-                  style=${styleMap({
-                    height: this._narrow
-                      ? "calc(100vh - 56px)"
-                      : `${Math.min(
-                          items.length * (this._commandMode ? 56 : 72) + 26,
-                          this._done ? 500 : 0
-                        )}px`,
-                  })}
-                  .items=${items}
-                  .renderItem=${this._renderItem}
-                >
-                </lit-virtualizer>
+                ${this._opened
+                  ? html`<lit-virtualizer
+                      scroller
+                      @keydown=${this._handleListItemKeyDown}
+                      @rangechange=${this._handleRangeChanged}
+                      @click=${this._handleItemClick}
+                      class="ha-scrollbar"
+                      style=${styleMap({
+                        height: this._narrow
+                          ? "calc(100vh - 56px)"
+                          : `${Math.min(
+                              items.length * (this._commandMode ? 56 : 72) + 26,
+                              500
+                            )}px`,
+                      })}
+                      .items=${items}
+                      .renderItem=${this._renderItem}
+                    >
+                    </lit-virtualizer>`
+                  : ""}
               </mwc-list>
             `}
         ${this._hint ? html`<div class="hint">${this._hint}</div>` : ""}
@@ -269,9 +254,7 @@ export class QuickBar extends LitElement {
   }
 
   private _handleOpened() {
-    this.updateComplete.then(() => {
-      this._done = true;
-    });
+    this._opened = true;
   }
 
   private async _handleRangeChanged(e) {
@@ -471,9 +454,10 @@ export class QuickBar extends LitElement {
   }
 
   private _handleItemClick(ev) {
+    const listItem = ev.target.closest("mwc-list-item");
     this.processItemAndCloseDialog(
-      (ev.target as any).item,
-      Number((ev.target as HTMLElement).getAttribute("index"))
+      listItem.item,
+      Number(listItem.getAttribute("index"))
     );
   }