Fix helper UI (#5161)

Fixes #5146
Fixes #5145
Fixes #5142

src/panels/config/helpers/dialog-helper-detail.ts

@@ -6,6 +6,7 @@ import {
   LitElement,
   property,
   TemplateResult,
+  query,
 } from "lit-element";
 import "../../../components/ha-dialog";
 import { HomeAssistant } from "../../../types";
@@ -44,6 +45,7 @@ export class DialogHelperDetail extends LitElement {
   @property() private _platform?: string;
   @property() private _error?: string;
   @property() private _submitting = false;
+  @query(".form") private _form?: HTMLDivElement;
 
   public async showDialog(): Promise<void> {
     this._platform = undefined;
@@ -108,11 +110,13 @@ export class DialogHelperDetail extends LitElement {
               ${Object.keys(HELPERS).map((platform: string) => {
                 const isLoaded = isComponentLoaded(this.hass, platform);
                 return html`
-                  <div>
+                  <div class="form">
                     <paper-icon-item
                       .disabled=${!isLoaded}
                       @click=${this._platformPicked}
+                      @keydown=${this._handleEnter}
                       .platform=${platform}
+                      dialogInitialFocus
                     >
                       <ha-icon
                         slot="item-icon"
@@ -166,12 +170,28 @@ export class DialogHelperDetail extends LitElement {
     }
   }
 
+  private _handleEnter(ev: KeyboardEvent) {
+    if (ev.keyCode !== 13) {
+      return;
+    }
+    ev.stopPropagation();
+    ev.preventDefault();
+    this._platformPicked(ev);
+  }
+
   private _platformPicked(ev: Event): void {
     this._platform = (ev.currentTarget! as any).platform;
+    this._focusForm();
+  }
+
+  private async _focusForm(): Promise<void> {
+    await this.updateComplete;
+    (this._form?.lastElementChild as HTMLElement).focus();
   }
 
   private _goBack() {
     this._platform = undefined;
+    this._item = undefined;
   }
 
   static get styles(): CSSResult[] {

src/panels/config/helpers/forms/ha-input_boolean-form.ts

@@ -36,6 +36,14 @@ class HaInputBooleanForm extends LitElement {
     }
   }
 
+  public focus() {
+    this.updateComplete.then(() =>
+      (this.shadowRoot?.querySelector(
+        "[dialogInitialFocus]"
+      ) as HTMLElement)?.focus()
+    );
+  }
+
   protected render(): TemplateResult {
     if (!this.hass) {
       return html``;
@@ -55,6 +63,7 @@ class HaInputBooleanForm extends LitElement {
             "ui.dialogs.helper_settings.required_error_msg"
           )}"
           .invalid=${nameInvalid}
+          dialogInitialFocus
         ></paper-input>
         <ha-icon-input
           .value=${this._icon}

src/panels/config/helpers/forms/ha-input_datetime-form.ts

@@ -44,6 +44,14 @@ class HaInputDateTimeForm extends LitElement {
     }
   }
 
+  public focus() {
+    this.updateComplete.then(() =>
+      (this.shadowRoot?.querySelector(
+        "[dialogInitialFocus]"
+      ) as HTMLElement)?.focus()
+    );
+  }
+
   protected render(): TemplateResult {
     if (!this.hass) {
       return html``;
@@ -63,6 +71,7 @@ class HaInputDateTimeForm extends LitElement {
             "ui.dialogs.helper_settings.required_error_msg"
           )}"
           .invalid=${nameInvalid}
+          dialogInitialFocus
         ></paper-input>
         <ha-icon-input
           .value=${this._icon}

src/panels/config/helpers/forms/ha-input_number-form.ts

@@ -55,6 +55,14 @@ class HaInputNumberForm extends LitElement {
     }
   }
 
+  public focus() {
+    this.updateComplete.then(() =>
+      (this.shadowRoot?.querySelector(
+        "[dialogInitialFocus]"
+      ) as HTMLElement)?.focus()
+    );
+  }
+
   protected render(): TemplateResult {
     if (!this.hass) {
       return html``;
@@ -74,6 +82,7 @@ class HaInputNumberForm extends LitElement {
             "ui.dialogs.helper_settings.required_error_msg"
           )}"
           .invalid=${nameInvalid}
+          dialogInitialFocus
         ></paper-input>
         <ha-icon-input
           .value=${this._icon}

src/panels/config/helpers/forms/ha-input_select-form.ts

@@ -44,6 +44,14 @@ class HaInputSelectForm extends LitElement {
     }
   }
 
+  public focus() {
+    this.updateComplete.then(() =>
+      (this.shadowRoot?.querySelector(
+        "[dialogInitialFocus]"
+      ) as HTMLElement)?.focus()
+    );
+  }
+
   protected render(): TemplateResult {
     if (!this.hass) {
       return html``;
@@ -63,6 +71,7 @@ class HaInputSelectForm extends LitElement {
             "ui.dialogs.helper_settings.required_error_msg"
           )}"
           .invalid=${nameInvalid}
+          dialogInitialFocus
         ></paper-input>
         <ha-icon-input
           .value=${this._icon}

src/panels/config/helpers/forms/ha-input_text-form.ts

@@ -47,6 +47,14 @@ class HaInputTextForm extends LitElement {
     }
   }
 
+  public focus() {
+    this.updateComplete.then(() =>
+      (this.shadowRoot?.querySelector(
+        "[dialogInitialFocus]"
+      ) as HTMLElement)?.focus()
+    );
+  }
+
   protected render(): TemplateResult {
     if (!this.hass) {
       return html``;
@@ -66,6 +74,7 @@ class HaInputTextForm extends LitElement {
             "ui.dialogs.helper_settings.required_error_msg"
           )}"
           .invalid=${nameInvalid}
+          dialogInitialFocus
         ></paper-input>
         <ha-icon-input
           .value=${this._icon}

src/panels/config/lovelace/dashboards/dialog-lovelace-dashboard-detail.ts

@@ -104,6 +104,7 @@ export class DialogLovelaceDashboardDetail extends LitElement {
                     .errorMessage=${this.hass.localize(
                       "ui.panel.config.lovelace.dashboards.detail.title_required"
                     )}
+                    dialogInitialFocus
                   ></paper-input>
                   <ha-icon-input
                     .value=${this._icon}

src/panels/config/lovelace/resources/dialog-lovelace-resource-detail.ts

@@ -86,6 +86,7 @@ export class DialogLovelaceResourceDetail extends LitElement {
                 "ui.panel.config.lovelace.resources.detail.url_error_msg"
               )}
               .invalid=${urlInvalid}
+              dialogInitialFocus
             ></paper-input>
             <br />
             <ha-paper-dropdown-menu