Automation editor: fix focus handling (#26755)

2025-11-09 02:49:51 +00:00 · 2025-08-29 08:39:06 +02:00
parent a376670478
commit b86c1db83d
9 changed files with 60 additions and 54 deletions
--- a/src/components/ha-automation-row.ts
+++ b/src/components/ha-automation-row.ts
@@ -103,7 +103,9 @@ export class HaAutomationRow extends LitElement {
  }

  public focus() {
-    requestAnimationFrame(() => this._rowElement?.focus());
+    requestAnimationFrame(() => {
+      this._rowElement?.focus();
+    });
  }

  static styles = css`
--- a/src/data/automation.ts
+++ b/src/data/automation.ts
@@ -558,11 +558,11 @@ export interface AutomationClipboard {
 export interface BaseSidebarConfig {
  toggleYamlMode: () => boolean;
  delete: () => void;
+  close: (focus?: boolean) => void;
 }

 export interface TriggerSidebarConfig extends BaseSidebarConfig {
  save: (value: Trigger) => void;
-  close: () => void;
  rename: () => void;
  disable: () => void;
  duplicate: () => void;
@@ -575,7 +575,6 @@ export interface TriggerSidebarConfig extends BaseSidebarConfig {

 export interface ConditionSidebarConfig extends BaseSidebarConfig {
  save: (value: Condition) => void;
-  close: () => void;
  rename: () => void;
  disable: () => void;
  test: () => void;
@@ -589,7 +588,6 @@ export interface ConditionSidebarConfig extends BaseSidebarConfig {

 export interface ActionSidebarConfig extends BaseSidebarConfig {
  save: (value: Action) => void;
-  close: () => void;
  rename: () => void;
  disable: () => void;
  duplicate: () => void;
@@ -604,7 +602,6 @@ export interface ActionSidebarConfig extends BaseSidebarConfig {
 }

 export interface OptionSidebarConfig extends BaseSidebarConfig {
-  close: () => void;
  rename: () => void;
  duplicate: () => void;
  defaultOption?: boolean;
@@ -612,7 +609,6 @@ export interface OptionSidebarConfig extends BaseSidebarConfig {

 export interface ScriptFieldSidebarConfig extends BaseSidebarConfig {
  save: (value: Field) => void;
-  close: () => void;
  config: {
    field: Field;
    selector: boolean;
--- a/src/panels/config/automation/action/ha-automation-action-row.ts
+++ b/src/panels/config/automation/action/ha-automation-action-row.ts
@@ -676,9 +676,12 @@ export default class HaAutomationActionRow extends LitElement {
      save: (value) => {
        fireEvent(this, "value-changed", { value });
      },
-      close: () => {
+      close: (focus?: boolean) => {
        this._selected = false;
        fireEvent(this, "close-sidebar");
+        if (focus) {
+          this.focus();
+        }
      },
      rename: () => {
        this._renameAction();
--- a/src/panels/config/automation/condition/ha-automation-condition-row.ts
+++ b/src/panels/config/automation/condition/ha-automation-condition-row.ts
@@ -648,9 +648,12 @@ export default class HaAutomationConditionRow extends LitElement {
      save: (value) => {
        fireEvent(this, "value-changed", { value });
      },
-      close: () => {
+      close: (focus?: boolean) => {
        this._selected = false;
        fireEvent(this, "close-sidebar");
+        if (focus) {
+          this.focus();
+        }
      },
      rename: () => {
        this._renameCondition();
--- a/src/panels/config/automation/ha-automation-sidebar.ts
+++ b/src/panels/config/automation/ha-automation-sidebar.ts
@@ -193,7 +193,7 @@ export default class HaAutomationSidebar extends LitElement {
  }

  private _closeSidebar() {
-    this.config?.close();
+    this.config?.close(true);
  }

  private _toggleYamlMode = () => {
--- a/src/panels/config/automation/option/ha-automation-option-row.ts
+++ b/src/panels/config/automation/option/ha-automation-option-row.ts
@@ -385,9 +385,12 @@ export default class HaAutomationOptionRow extends LitElement {

  public openSidebar(): void {
    fireEvent(this, "open-sidebar", {
-      close: () => {
+      close: (focus?: boolean) => {
        this._selected = false;
        fireEvent(this, "close-sidebar");
+        if (focus) {
+          this.focus();
+        }
      },
      rename: () => {
        this._renameOption();
--- a/src/panels/config/automation/trigger/ha-automation-trigger-row.ts
+++ b/src/panels/config/automation/trigger/ha-automation-trigger-row.ts
@@ -482,9 +482,12 @@ export default class HaAutomationTriggerRow extends LitElement {
      save: (value) => {
        fireEvent(this, "value-changed", { value });
      },
-      close: () => {
+      close: (focus?: boolean) => {
        this._selected = false;
        fireEvent(this, "close-sidebar");
+        if (focus) {
+          this.focus();
+        }
      },
      rename: () => {
        this._renameTrigger();
--- a/src/panels/config/script/ha-script-field-row.ts
+++ b/src/panels/config/script/ha-script-field-row.ts
@@ -1,17 +1,12 @@
-import { mdiDelete } from "@mdi/js";
 import type { CSSResultGroup } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { fireEvent } from "../../../common/dom/fire_event";
-import { preventDefaultStopPropagation } from "../../../common/dom/prevent_default_stop_propagation";
-import { stopPropagation } from "../../../common/dom/stop_propagation";
 import type { LocalizeKeys } from "../../../common/translations/localize";
 import "../../../components/ha-automation-row";
+import type { HaAutomationRow } from "../../../components/ha-automation-row";
 import "../../../components/ha-card";
-import "../../../components/ha-icon-button";
-import "../../../components/ha-md-button-menu";
-import "../../../components/ha-md-menu-item";
 import type { ScriptFieldSidebarConfig } from "../../../data/automation";
 import type { Field } from "../../../data/script";
 import { SELECTOR_SELECTOR_BUILDING_BLOCKS } from "../../../data/selector/selector_selector";
@@ -50,6 +45,12 @@ export default class HaScriptFieldRow extends LitElement {
  @query("ha-script-field-selector-editor")
  private _selectorEditor?: HaScriptFieldSelectorEditor;

+  @query("ha-automation-row:first-of-type")
+  private _fieldRowElement?: HaAutomationRow;
+
+  @query(".selector-row ha-automation-row")
+  private _selectorRowElement?: HaAutomationRow;
+
  protected render() {
    return html`
      <ha-card outlined>
@@ -64,29 +65,6 @@ export default class HaScriptFieldRow extends LitElement {
          <h3 slot="header">${this.key}</h3>

          <slot name="icons" slot="icons"></slot>
-
-          <ha-md-button-menu
-            quick
-            slot="icons"
-            @click=${preventDefaultStopPropagation}
-            @keydown=${stopPropagation}
-            @closed=${stopPropagation}
-            positioning="fixed"
-            anchor-corner="end-end"
-            menu-corner="start-end"
-          >
-            <ha-md-menu-item
-              slot="menu-items"
-              .clickAction=${this._onDelete}
-              .disabled=${this.disabled}
-              class="warning"
-            >
-              ${this.hass.localize(
-                "ui.panel.config.automation.editor.actions.delete"
-              )}
-              <ha-svg-icon slot="start" .path=${mdiDelete}></ha-svg-icon>
-            </ha-md-menu-item>
-          </ha-md-button-menu>
        </ha-automation-row>
      </ha-card>
      <div
@@ -224,11 +202,17 @@ export default class HaScriptFieldRow extends LitElement {
      save: (value) => {
        fireEvent(this, "value-changed", { value });
      },
-      close: () => {
+      close: (focus?: boolean) => {
        if (selectorEditor) {
          this._selectorRowSelected = false;
+          if (focus) {
+            this.focusSelector();
+          }
        } else {
          this._selected = false;
+          if (focus) {
+            this.focus();
+          }
        }
        fireEvent(this, "close-sidebar");
      },
@@ -280,15 +264,19 @@ export default class HaScriptFieldRow extends LitElement {
    });
  };

+  public focus() {
+    this._fieldRowElement?.focus();
+  }
+
+  public focusSelector() {
+    this._selectorRowElement?.focus();
+  }
+
  static get styles(): CSSResultGroup {
    return [
      haStyle,
      indentStyle,
      css`
-        ha-button-menu,
-        ha-icon-button {
-          --mdc-theme-text-primary-on-background: var(--primary-text-color);
-        }
        .disabled {
          opacity: 0.5;
          pointer-events: none;
@@ -334,9 +322,6 @@ export default class HaScriptFieldRow extends LitElement {
          );
        }

-        ha-md-menu-item[disabled] {
-          --mdc-theme-text-primary-on-background: var(--disabled-text-color);
-        }
        .warning ul {
          margin: 4px 0;
        }
@@ -352,6 +337,10 @@ export default class HaScriptFieldRow extends LitElement {
          border-color: var(--state-inactive-color);
          box-shadow: var(--shadow-default), var(--shadow-focus);
        }
+
+        .selector-row {
+          padding: 12px 0 16px 16px;
+        }
      `,
    ];
  }
--- a/src/panels/config/script/manual-script-editor.ts
+++ b/src/panels/config/script/manual-script-editor.ts
@@ -38,6 +38,7 @@ import { showToast } from "../../../util/toast";
 import "../automation/action/ha-automation-action";
 import type HaAutomationAction from "../automation/action/ha-automation-action";
 import "../automation/ha-automation-sidebar";
+import type HaAutomationSidebar from "../automation/ha-automation-sidebar";
 import { showPasteReplaceDialog } from "../automation/paste-replace-dialog/show-dialog-paste-replace";
 import { manualEditorStyles, saveFabStyles } from "../automation/styles";
 import "./ha-script-fields";
@@ -69,17 +70,19 @@ export class HaManualScriptEditor extends LitElement {

  @property({ attribute: false }) public dirty = false;

-  @query("ha-script-fields")
-  private _scriptFields?: HaScriptFields;
-
-  private _openFields = false;
-
  @state() private _pastedConfig?: ScriptConfig;

  @state() private _sidebarConfig?: SidebarConfig;

+  @query("ha-script-fields")
+  private _scriptFields?: HaScriptFields;
+
+  @query("ha-automation-sidebar") private _sidebarElement?: HaAutomationSidebar;
+
  private _previousConfig?: ScriptConfig;

+  private _openFields = false;
+
  public addFields() {
    this._openFields = true;
    fireEvent(this, "value-changed", {
@@ -217,6 +220,7 @@ export class HaManualScriptEditor extends LitElement {
          </ha-fab>
        </div>
        <ha-automation-sidebar
+          tabindex="-1"
          class=${classMap({
            sidebar: true,
            overlay: !this.isWide,
@@ -455,10 +459,13 @@ export class HaManualScriptEditor extends LitElement {
    });
  }

-  private _openSidebar(ev: CustomEvent<SidebarConfig>) {
+  private async _openSidebar(ev: CustomEvent<SidebarConfig>) {
    // deselect previous selected row
    this._sidebarConfig?.close?.();
    this._sidebarConfig = ev.detail;
+
+    await this._sidebarElement?.updateComplete;
+    this._sidebarElement?.focus();
  }

  private _sidebarConfigChanged(ev: CustomEvent<{ value: SidebarConfig }>) {