Fix pickers not getting focus (#14068)

* fix focus pickers

* await nextRender instead of setTimeout

* use bram's code

* Update src/components/ha-target-picker.ts

Co-authored-by: Steve Repsher <steverep@users.noreply.github.com>

Co-authored-by: Steve Repsher <steverep@users.noreply.github.com>

src/components/device/ha-device-picker.ts

@@ -221,12 +221,14 @@ export class HaDevicePicker extends SubscribeMixin(LitElement) {
     }
   );
 
-  public open() {
-    this.comboBox?.open();
+  public async open() {
+    await this.updateComplete;
+    await this.comboBox?.open();
   }
 
-  public focus() {
-    this.comboBox?.focus();
+  public async focus() {
+    await this.updateComplete;
+    await this.comboBox?.focus();
   }
 
   public hassSubscribe(): UnsubscribeFunc[] {
@@ -246,7 +248,7 @@ export class HaDevicePicker extends SubscribeMixin(LitElement) {
   protected updated(changedProps: PropertyValues) {
     if (
       (!this._init && this.devices && this.areas && this.entities) ||
-      (changedProps.has("_opened") && this._opened)
+      (this._init && changedProps.has("_opened") && this._opened)
     ) {
       this._init = true;
       (this.comboBox as any).items = this._getDevices(
@@ -262,9 +264,6 @@ export class HaDevicePicker extends SubscribeMixin(LitElement) {
   }
 
   protected render(): TemplateResult {
-    if (!this.devices || !this.areas || !this.entities) {
-      return html``;
-    }
     return html`
       <ha-combo-box
         .hass=${this.hass}

src/components/entity/ha-entity-picker.ts

@@ -107,16 +107,14 @@ export class HaEntityPicker extends LitElement {
 
   @query("ha-combo-box", true) public comboBox!: HaComboBox;
 
-  public open() {
-    this.updateComplete.then(() => {
-      this.comboBox?.open();
-    });
+  public async open() {
+    await this.updateComplete;
+    await this.comboBox?.open();
   }
 
-  public focus() {
-    this.updateComplete.then(() => {
-      this.comboBox?.focus();
-    });
+  public async focus() {
+    await this.updateComplete;
+    await this.comboBox?.focus();
   }
 
   private _initedStates = false;

src/components/ha-area-picker.ts

@@ -116,16 +116,14 @@ export class HaAreaPicker extends SubscribeMixin(LitElement) {
     ];
   }
 
-  public open() {
-    this.updateComplete.then(() => {
-      this.comboBox?.open();
-    });
+  public async open() {
+    await this.updateComplete;
+    await this.comboBox?.open();
   }
 
-  public focus() {
-    this.updateComplete.then(() => {
-      this.comboBox?.focus();
-    });
+  public async focus() {
+    await this.updateComplete;
+    await this.comboBox?.focus();
   }
 
   private _getAreas = memoizeOne(
@@ -290,7 +288,7 @@ export class HaAreaPicker extends SubscribeMixin(LitElement) {
   protected updated(changedProps: PropertyValues) {
     if (
       (!this._init && this._devices && this._areas && this._entities) ||
-      (changedProps.has("_opened") && this._opened)
+      (this._init && changedProps.has("_opened") && this._opened)
     ) {
       this._init = true;
       (this.comboBox as any).items = this._getAreas(
@@ -308,9 +306,6 @@ export class HaAreaPicker extends SubscribeMixin(LitElement) {
   }
 
   protected render(): TemplateResult {
-    if (!this._devices || !this._areas || !this._entities) {
-      return html``;
-    }
     return html`
       <ha-combo-box
         .hass=${this.hass}

src/components/ha-combo-box.ts

@@ -1,5 +1,6 @@
 import "@material/mwc-list/mwc-list-item";
 import { mdiClose, mdiMenuDown, mdiMenuUp } from "@mdi/js";
+import { ComboBoxLitRenderer, comboBoxRenderer } from "@vaadin/combo-box/lit";
 import "@vaadin/combo-box/theme/material/vaadin-combo-box-light";
 import type {
   ComboBoxLight,
@@ -16,13 +17,13 @@ import {
   PropertyValues,
   TemplateResult,
 } from "lit";
-import { ComboBoxLitRenderer, comboBoxRenderer } from "@vaadin/combo-box/lit";
 import { customElement, property, query } from "lit/decorators";
 import { ifDefined } from "lit/directives/if-defined";
 import { fireEvent } from "../common/dom/fire_event";
 import { HomeAssistant } from "../types";
 import "./ha-icon-button";
 import "./ha-textfield";
+import type { HaTextField } from "./ha-textfield";
 
 registerStyles(
   "vaadin-combo-box-item",
@@ -108,18 +109,19 @@ export class HaComboBox extends LitElement {
 
   @query("vaadin-combo-box-light", true) private _comboBox!: ComboBoxLight;
 
+  @query("ha-textfield", true) private _inputElement!: HaTextField;
+
   private _overlayMutationObserver?: MutationObserver;
 
-  public open() {
-    this.updateComplete.then(() => {
-      this._comboBox?.open();
-    });
+  public async open() {
+    await this.updateComplete;
+    this._comboBox?.open();
   }
 
-  public focus() {
-    this.updateComplete.then(() => {
-      this._comboBox?.inputElement?.focus();
-    });
+  public async focus() {
+    await this.updateComplete;
+    await this._inputElement?.updateComplete;
+    this._inputElement?.focus();
   }
 
   public disconnectedCallback() {

src/components/ha-target-picker.ts

@@ -251,10 +251,8 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
   private async _showPicker(ev) {
     this._addMode = ev.currentTarget.type;
     await this.updateComplete;
-    setTimeout(() => {
-      this._inputElement?.open();
-      this._inputElement?.focus();
-    }, 0);
+    await this._inputElement?.focus();
+    await this._inputElement?.open();
   }
 
   private _renderChip(