From 87221576238ff1f54ce017530360824972b01db7 Mon Sep 17 00:00:00 2001
From: Marcin <marcinbauer85@gmail.com>
Date: Mon, 16 Dec 2024 14:54:29 +0100
Subject: [PATCH] Focus on card search input when adding new card (#23309)

* Focus on card search input when adding new card

* Update src/panels/lovelace/editor/card-editor/hui-card-picker.ts

Co-authored-by: Simon Lamon <32477463+silamon@users.noreply.github.com>

* update and fix

* not on mobile

---------

Co-authored-by: Petar Petrov <MindFreeze@users.noreply.github.com>
Co-authored-by: Simon Lamon <32477463+silamon@users.noreply.github.com>
Co-authored-by: Bram Kragten <mail@bramkragten.nl>
---
 .../lovelace/editor/card-editor/hui-card-picker.ts   | 10 ++++++++++
 .../editor/card-editor/hui-dialog-create-card.ts     | 12 ++++++++++--
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/src/panels/lovelace/editor/card-editor/hui-card-picker.ts b/src/panels/lovelace/editor/card-editor/hui-card-picker.ts
index 83fa15305f..a1e2894bb2 100644
--- a/src/panels/lovelace/editor/card-editor/hui-card-picker.ts
+++ b/src/panels/lovelace/editor/card-editor/hui-card-picker.ts
@@ -69,6 +69,16 @@ export class HuiCardPicker extends LitElement {
 
   private _usedEntities?: string[];
 
+  public async focus(): Promise<void> {
+    const searchInput = this.renderRoot.querySelector("search-input");
+    if (searchInput) {
+      searchInput.focus();
+    } else {
+      await this.updateComplete;
+      this.focus();
+    }
+  }
+
   private _filterCards = memoizeOne(
     (cardElements: CardElement[], filter?: string): CardElement[] => {
       if (!filter) {
diff --git a/src/panels/lovelace/editor/card-editor/hui-dialog-create-card.ts b/src/panels/lovelace/editor/card-editor/hui-dialog-create-card.ts
index 08f5487aed..e1b03e8cf2 100644
--- a/src/panels/lovelace/editor/card-editor/hui-dialog-create-card.ts
+++ b/src/panels/lovelace/editor/card-editor/hui-dialog-create-card.ts
@@ -3,6 +3,7 @@ import "@material/mwc-tab/mwc-tab";
 import { mdiClose } from "@mdi/js";
 import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
+import { ifDefined } from "lit/directives/if-defined";
 import { customElement, property, state } from "lit/decorators";
 import { cache } from "lit/directives/cache";
 import { classMap } from "lit/directives/class-map";
@@ -60,9 +61,15 @@ export class HuiCreateDialogCard
 
   @state() private _currTabIndex = 0;
 
+  @state() private _narrow = false;
+
   public async showDialog(params: CreateCardDialogParams): Promise<void> {
     this._params = params;
 
+    this._narrow = matchMedia(
+      "all and (max-width: 450px), all and (max-height: 500px)"
+    ).matches;
+
     const containerConfig = findLovelaceContainer(
       params.lovelaceConfig,
       params.path
@@ -120,7 +127,7 @@ export class HuiCreateDialogCard
               .label=${this.hass!.localize(
                 "ui.panel.lovelace.editor.cardpicker.by_card"
               )}
-              dialogInitialFocus
+              dialogInitialFocus=${ifDefined(this._narrow ? "" : undefined)}
             ></mwc-tab>
             <mwc-tab
               .label=${this.hass!.localize(
@@ -133,6 +140,7 @@ export class HuiCreateDialogCard
           this._currTabIndex === 0
             ? html`
                 <hui-card-picker
+                  dialogInitialFocus=${ifDefined(this._narrow ? undefined : "")}
                   .suggestedCards=${this._params.suggestedCards}
                   .lovelace=${this._params.lovelaceConfig}
                   .hass=${this.hass}
@@ -143,7 +151,7 @@ export class HuiCreateDialogCard
                 <hui-entity-picker-table
                   no-label-float
                   .hass=${this.hass}
-                  .narrow=${true}
+                  narrow
                   .entities=${this._allEntities(this.hass.states)}
                   @selected-changed=${this._handleSelectedChanged}
                 ></hui-entity-picker-table>