Focus search input on integrations dashboard when using search shotcut (

#23647)

Focus search input on integrations dashboard when using search shortcut

src/panels/config/integrations/ha-config-integrations-dashboard.ts

@@ -5,7 +5,7 @@ import Fuse from "fuse.js";
 import type { UnsubscribeFunc } from "home-assistant-js-websocket";
 import type { CSSResultGroup, PropertyValues } from "lit";
 import { LitElement, css, html, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { customElement, property, query, state } from "lit/decorators";
 import { ifDefined } from "lit/directives/if-defined";
 import memoizeOne from "memoize-one";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
@@ -70,6 +70,7 @@ import "./ha-integration-overflow-menu";
 import { showAddIntegrationDialog } from "./show-add-integration-dialog";
 import { fetchEntitySourcesWithCache } from "../../../data/entity_sources";
 import type { ImprovDiscoveredDevice } from "../../../external_app/external_messaging";
+import { KeyboardShortcutMixin } from "../../../mixins/keyboard-shortcut-mixin";
 
 export interface ConfigEntryExtended extends Omit<ConfigEntry, "entry_id"> {
   entry_id?: string;
@@ -90,7 +91,9 @@ const groupByIntegration = (
   return result;
 };
 @customElement("ha-config-integrations-dashboard")
-class HaConfigIntegrationsDashboard extends SubscribeMixin(LitElement) {
+class HaConfigIntegrationsDashboard extends KeyboardShortcutMixin(
+  SubscribeMixin(LitElement)
+) {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property({ type: Boolean, reflect: true }) public narrow = false;
@@ -135,6 +138,8 @@ class HaConfigIntegrationsDashboard extends SubscribeMixin(LitElement) {
     [integration: string]: IntegrationLogInfo;
   };
 
+  @query("search-input-outlined") private _searchInput!: HTMLElement;
+
   public disconnectedCallback(): void {
     super.disconnectedCallback();
     window.removeEventListener(
@@ -946,6 +951,12 @@ class HaConfigIntegrationsDashboard extends SubscribeMixin(LitElement) {
     });
   }
 
+  protected supportedShortcuts(): SupportedShortcuts {
+    return {
+      f: () => this._searchInput.focus(),
+    };
+  }
+
   static get styles(): CSSResultGroup {
     return [
       haStyle,