From 68ecb7c21907d5640166b43ae40a6a6defe76443 Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Sat, 23 Dec 2023 00:03:52 +0100
Subject: [PATCH] Store height and width of dialog, autofocus searchbar
 (#19122)

---
 .../automation/action/ha-automation-action.ts | 46 +++++++++++--------
 .../add-automation-element-dialog.ts          | 30 +++++++++++-
 .../condition/ha-automation-condition.ts      | 45 ++++++++++--------
 3 files changed, 80 insertions(+), 41 deletions(-)

diff --git a/src/panels/config/automation/action/ha-automation-action.ts b/src/panels/config/automation/action/ha-automation-action.ts
index df140e94eade..c75237a2c00f 100644
--- a/src/panels/config/automation/action/ha-automation-action.ts
+++ b/src/panels/config/automation/action/ha-automation-action.ts
@@ -119,26 +119,27 @@ export default class HaAutomationAction extends LitElement {
           `
         )}
       </div>
-      <ha-button
-        slot="trigger"
-        outlined
-        .disabled=${this.disabled}
-        .label=${this.hass.localize(
-          "ui.panel.config.automation.editor.actions.add"
-        )}
-        @click=${this._addActionDialog}
-      >
-        <ha-svg-icon .path=${mdiPlus} slot="icon"></ha-svg-icon>
-      </ha-button>
-      <ha-button
-        .disabled=${this.disabled}
-        .label=${this.hass.localize(
-          "ui.panel.config.automation.editor.actions.add_building_block"
-        )}
-        @click=${this._addActionBuildingBlockDialog}
-      >
-        <ha-svg-icon .path=${mdiPlus} slot="icon"></ha-svg-icon>
-      </ha-button>
+      <div class="buttons">
+        <ha-button
+          outlined
+          .disabled=${this.disabled}
+          .label=${this.hass.localize(
+            "ui.panel.config.automation.editor.actions.add"
+          )}
+          @click=${this._addActionDialog}
+        >
+          <ha-svg-icon .path=${mdiPlus} slot="icon"></ha-svg-icon>
+        </ha-button>
+        <ha-button
+          .disabled=${this.disabled}
+          .label=${this.hass.localize(
+            "ui.panel.config.automation.editor.actions.add_building_block"
+          )}
+          @click=${this._addActionBuildingBlockDialog}
+        >
+          <ha-svg-icon .path=${mdiPlus} slot="icon"></ha-svg-icon>
+        </ha-button>
+      </div>
     `;
   }
 
@@ -325,6 +326,11 @@ export default class HaAutomationAction extends LitElement {
           pointer-events: none;
           height: 24px;
         }
+        .buttons {
+          display: flex;
+          flex-wrap: wrap;
+          gap: 8px;
+        }
       `,
     ];
   }
diff --git a/src/panels/config/automation/add-automation-element-dialog.ts b/src/panels/config/automation/add-automation-element-dialog.ts
index b24bb7112171..097a00ca27a0 100644
--- a/src/panels/config/automation/add-automation-element-dialog.ts
+++ b/src/panels/config/automation/add-automation-element-dialog.ts
@@ -5,6 +5,7 @@ import { CSSResultGroup, LitElement, css, html, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { repeat } from "lit/directives/repeat";
 import memoizeOne from "memoize-one";
+import { styleMap } from "lit/directives/style-map";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { domainIcon } from "../../../common/entity/domain_icon";
 import { shouldHandleRequestSelectedEvent } from "../../../common/mwc/handle-request-selected-event";
@@ -93,6 +94,10 @@ class DialogAddAutomationElement extends LitElement implements HassDialog {
 
   @query("ha-dialog") private _dialog?: HaDialog;
 
+  private _width?: number;
+
+  private _height?: number;
+
   public showDialog(params): void {
     this._params = params;
     this._group = params.group;
@@ -106,6 +111,8 @@ class DialogAddAutomationElement extends LitElement implements HassDialog {
     if (this._params) {
       fireEvent(this, "dialog-closed", { dialog: this.localName });
     }
+    this._height = undefined;
+    this._width = undefined;
     this._params = undefined;
     this._group = undefined;
     this._prev = undefined;
@@ -349,6 +356,14 @@ class DialogAddAutomationElement extends LitElement implements HassDialog {
     this._manifests = manifests;
   }
 
+  protected _opened(): void {
+    // Store the width and height so that when we search, box doesn't jump
+    const boundingRect =
+      this.shadowRoot!.querySelector("mwc-list")?.getBoundingClientRect();
+    this._width = boundingRect?.width;
+    this._height = boundingRect?.height;
+  }
+
   protected render() {
     if (!this._params) {
       return nothing;
@@ -383,7 +398,13 @@ class DialogAddAutomationElement extends LitElement implements HassDialog {
         );
 
     return html`
-      <ha-dialog open hideActions @closed=${this.closeDialog} .heading=${true}>
+      <ha-dialog
+        open
+        hideActions
+        @opened=${this._opened}
+        @closed=${this.closeDialog}
+        .heading=${true}
+      >
         <div slot="heading">
           <ha-header-bar>
             <span slot="title"
@@ -405,6 +426,8 @@ class DialogAddAutomationElement extends LitElement implements HassDialog {
                 ></ha-icon-button>`}
           </ha-header-bar>
           <search-input
+            autofocus
+            dialogInitialFocus
             .hass=${this.hass}
             .filter=${this._filter}
             @value-changed=${this._filterChanged}
@@ -422,7 +445,10 @@ class DialogAddAutomationElement extends LitElement implements HassDialog {
           innerRole="listbox"
           itemRoles="option"
           rootTabbable
-          dialogInitialFocus
+          style=${styleMap({
+            width: `${this._width}px`,
+            height: `${this._height}px`,
+          })}
         >
           ${this._params.clipboardItem &&
           !this._filter &&
diff --git a/src/panels/config/automation/condition/ha-automation-condition.ts b/src/panels/config/automation/condition/ha-automation-condition.ts
index 11744d74547b..7f38b7bb2b7c 100644
--- a/src/panels/config/automation/condition/ha-automation-condition.ts
+++ b/src/panels/config/automation/condition/ha-automation-condition.ts
@@ -175,25 +175,27 @@ export default class HaAutomationCondition extends LitElement {
           `
         )}
       </div>
-      <ha-button
-        outlined
-        .disabled=${this.disabled}
-        .label=${this.hass.localize(
-          "ui.panel.config.automation.editor.conditions.add"
-        )}
-        @click=${this._addConditionDialog}
-      >
-        <ha-svg-icon .path=${mdiPlus} slot="icon"></ha-svg-icon>
-      </ha-button>
-      <ha-button
-        .disabled=${this.disabled}
-        .label=${this.hass.localize(
-          "ui.panel.config.automation.editor.conditions.add_building_block"
-        )}
-        @click=${this._addConditionBuildingBlockDialog}
-      >
-        <ha-svg-icon .path=${mdiPlus} slot="icon"></ha-svg-icon>
-      </ha-button>
+      <div class="buttons">
+        <ha-button
+          outlined
+          .disabled=${this.disabled}
+          .label=${this.hass.localize(
+            "ui.panel.config.automation.editor.conditions.add"
+          )}
+          @click=${this._addConditionDialog}
+        >
+          <ha-svg-icon .path=${mdiPlus} slot="icon"></ha-svg-icon>
+        </ha-button>
+        <ha-button
+          .disabled=${this.disabled}
+          .label=${this.hass.localize(
+            "ui.panel.config.automation.editor.conditions.add_building_block"
+          )}
+          @click=${this._addConditionBuildingBlockDialog}
+        >
+          <ha-svg-icon .path=${mdiPlus} slot="icon"></ha-svg-icon>
+        </ha-button>
+      </div>
     `;
   }
 
@@ -363,6 +365,11 @@ export default class HaAutomationCondition extends LitElement {
           pointer-events: none;
           height: 24px;
         }
+        .buttons {
+          display: flex;
+          flex-wrap: wrap;
+          gap: 8px;
+        }
       `,
     ];
   }