diff --git a/src/panels/config/helpers/dialog-helper-detail.ts b/src/panels/config/helpers/dialog-helper-detail.ts index b2ceee0e23..379639fbc0 100644 --- a/src/panels/config/helpers/dialog-helper-detail.ts +++ b/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 { 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` -
+
{ + await this.updateComplete; + (this._form?.lastElementChild as HTMLElement).focus(); } private _goBack() { this._platform = undefined; + this._item = undefined; } static get styles(): CSSResult[] { diff --git a/src/panels/config/helpers/forms/ha-input_boolean-form.ts b/src/panels/config/helpers/forms/ha-input_boolean-form.ts index 0cf70281eb..1d1bfe6b35 100644 --- a/src/panels/config/helpers/forms/ha-input_boolean-form.ts +++ b/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 > + (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 > + (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 > + (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 > + (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 >