Only focus search when not in fullscreen dialog (#19153)

src/panels/config/automation/add-automation-element-dialog.ts

@@ -3,9 +3,10 @@ import { mdiClose, mdiContentPaste, mdiPlus } from "@mdi/js";
 import Fuse, { IFuseOptions } from "fuse.js";
 import { CSSResultGroup, LitElement, css, html, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
+import { ifDefined } from "lit/directives/if-defined";
 import { repeat } from "lit/directives/repeat";
-import memoizeOne from "memoize-one";
 import { styleMap } from "lit/directives/style-map";
+import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { domainIcon } from "../../../common/entity/domain_icon";
 import { shouldHandleRequestSelectedEvent } from "../../../common/mwc/handle-request-selected-event";
@@ -13,7 +14,7 @@ import { stringCompare } from "../../../common/string/compare";
 import { LocalizeFunc } from "../../../common/translations/localize";
 import "../../../components/ha-dialog";
 import type { HaDialog } from "../../../components/ha-dialog";
-import "../../../components/ha-header-bar";
+import "../../../components/ha-dialog-header";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-icon-button-prev";
 import "../../../components/ha-icon-next";
@@ -94,6 +95,8 @@ class DialogAddAutomationElement extends LitElement implements HassDialog {
 
   @query("ha-dialog") private _dialog?: HaDialog;
 
+  private _fullScreen = false;
+
   private _width?: number;
 
   private _height?: number;
@@ -105,6 +108,9 @@ class DialogAddAutomationElement extends LitElement implements HassDialog {
       this.hass.loadBackendTranslation("services");
       this._fetchManifests();
     }
+    this._fullScreen = matchMedia(
+      "all and (max-width: 450px), all and (max-height: 500px)"
+    ).matches;
   }
 
   public closeDialog(): void {
@@ -406,7 +412,7 @@ class DialogAddAutomationElement extends LitElement implements HassDialog {
         .heading=${true}
       >
         <div slot="heading">
-          <ha-header-bar>
+          <ha-dialog-header>
             <span slot="title"
               >${this._group
                 ? groupName
@@ -424,10 +430,9 @@ class DialogAddAutomationElement extends LitElement implements HassDialog {
                   slot="navigationIcon"
                   dialogAction="cancel"
                 ></ha-icon-button>`}
-          </ha-header-bar>
+          </ha-dialog-header>
           <search-input
-            autofocus
+            dialogInitialFocus=${ifDefined(this._fullScreen ? undefined : "")}
-            dialogInitialFocus
             .hass=${this.hass}
             .filter=${this._filter}
             @value-changed=${this._filterChanged}
@@ -442,6 +447,7 @@ class DialogAddAutomationElement extends LitElement implements HassDialog {
           ></search-input>
         </div>
         <mwc-list
+          dialogInitialFocus=${ifDefined(this._fullScreen ? "" : undefined)}
           innerRole="listbox"
           itemRoles="option"
           rootTabbable
@@ -554,12 +560,6 @@ class DialogAddAutomationElement extends LitElement implements HassDialog {
             --mdc-dialog-min-width: 500px;
           }
         }
-        ha-header-bar {
-          --mdc-theme-on-primary: var(--primary-text-color);
-          --mdc-theme-primary: var(--mdc-theme-surface);
-          margin-top: 8px;
-          display: block;
-        }
         ha-icon-next {
           width: 24px;
         }

src/panels/config/integrations/dialog-add-integration.ts

@@ -3,21 +3,22 @@ import "@material/mwc-list/mwc-list";
 import Fuse, { IFuseOptions } from "fuse.js";
 import { HassConfig } from "home-assistant-js-websocket";
 import {
-  css,
-  html,
   LitElement,
   PropertyValues,
   TemplateResult,
+  css,
+  html,
   nothing,
 } from "lit";
 import { customElement, state } from "lit/decorators";
+import { ifDefined } from "lit/directives/if-defined";
 import { styleMap } from "lit/directives/style-map";
 import memoizeOne from "memoize-one";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
 import { fireEvent } from "../../../common/dom/fire_event";
 import {
-  protocolIntegrationPicked,
   PROTOCOL_INTEGRATIONS,
+  protocolIntegrationPicked,
 } from "../../../common/integrations/protocolIntegrationPicked";
 import { navigate } from "../../../common/navigate";
 import { caseInsensitiveStringCompare } from "../../../common/string/compare";
@@ -34,10 +35,10 @@ import {
 import {
   Brand,
   Brands,
-  findIntegration,
-  getIntegrationDescriptions,
   Integration,
   Integrations,
+  findIntegration,
+  getIntegrationDescriptions,
 } from "../../../data/integrations";
 import { showConfigFlowDialog } from "../../../dialogs/config-flow/show-dialog-config-flow";
 import {
@@ -424,8 +425,7 @@ class AddIntegrationDialog extends LitElement {
   private _renderAll(integrations?: IntegrationListItem[]): TemplateResult {
     return html`<search-input
         .hass=${this.hass}
-        autofocus
+        dialogInitialFocus=${ifDefined(this._narrow ? undefined : "")}
-        dialogInitialFocus
         .filter=${this._filter}
         @value-changed=${this._filterChanged}
         .label=${this.hass.localize(
@@ -434,7 +434,9 @@ class AddIntegrationDialog extends LitElement {
         @keypress=${this._maybeSubmit}
       ></search-input>
       ${integrations
-        ? html`<mwc-list>
+        ? html`<mwc-list
+            dialogInitialFocus=${ifDefined(this._narrow ? "" : undefined)}
+          >
             <lit-virtualizer
               scroller
               class="ha-scrollbar"