From 609763e658330bbaa3fe584004492c8168062fc1 Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Wed, 18 Dec 2019 16:35:20 +0100
Subject: [PATCH] Set focus to search when opening add integration dialog
 (#4357)

* Set focus to search when opening add integration dialog

* Also add to flow form
---
 src/common/search/search-input.ts                 | 4 ++++
 src/dialogs/config-flow/step-flow-form.ts         | 1 +
 src/dialogs/config-flow/step-flow-pick-handler.ts | 8 ++++++++
 3 files changed, 13 insertions(+)

diff --git a/src/common/search/search-input.ts b/src/common/search/search-input.ts
index 65b29881e9..8bfcf399fd 100644
--- a/src/common/search/search-input.ts
+++ b/src/common/search/search-input.ts
@@ -16,6 +16,10 @@ import "@material/mwc-button";
 class SearchInput extends LitElement {
   @property() private filter?: string;
 
+  public focus() {
+    this.shadowRoot!.querySelector("paper-input")!.focus();
+  }
+
   protected render(): TemplateResult | void {
     return html`
       <div class="search-container">
diff --git a/src/dialogs/config-flow/step-flow-form.ts b/src/dialogs/config-flow/step-flow-form.ts
index 98d5ff33b7..c97c491df5 100644
--- a/src/dialogs/config-flow/step-flow-form.ts
+++ b/src/dialogs/config-flow/step-flow-form.ts
@@ -109,6 +109,7 @@ class StepFlowForm extends LitElement {
 
   protected firstUpdated(changedProps: PropertyValues) {
     super.firstUpdated(changedProps);
+    setTimeout(() => this.shadowRoot!.querySelector("ha-form")!.focus(), 0);
     this.addEventListener("keypress", (ev) => {
       if (ev.keyCode === 13) {
         this._submitStep();
diff --git a/src/dialogs/config-flow/step-flow-pick-handler.ts b/src/dialogs/config-flow/step-flow-pick-handler.ts
index ef410f7529..19963854af 100644
--- a/src/dialogs/config-flow/step-flow-pick-handler.ts
+++ b/src/dialogs/config-flow/step-flow-pick-handler.ts
@@ -101,6 +101,14 @@ class StepFlowPickHandler extends LitElement {
     `;
   }
 
+  protected firstUpdated(changedProps) {
+    super.firstUpdated(changedProps);
+    setTimeout(
+      () => this.shadowRoot!.querySelector("search-input")!.focus(),
+      0
+    );
+  }
+
   protected updated(changedProps) {
     super.updated(changedProps);
     // Store the width so that when we search, box doesn't jump