Intercept default search shortcut and focus our search input on data …

…table pages (#23209)

Intercept default search shortcut on data table pages

src/layouts/hass-tabs-subpage-data-table.ts

@@ -39,9 +39,10 @@ import type { HomeAssistant, Route } from "../types";
 import "./hass-tabs-subpage";
 import type { PageNavigation } from "./hass-tabs-subpage";
 import { showDataTableSettingsDialog } from "../components/data-table/show-dialog-data-table-settings";
+import { KeyboardShortcutMixin } from "../mixins/keyboard-shortcut-mixin";
 
 @customElement("hass-tabs-subpage-data-table")
-export class HaTabsSubpageDataTable extends LitElement {
+export class HaTabsSubpageDataTable extends KeyboardShortcutMixin(LitElement) {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property({ attribute: false }) public localizeFunc?: LocalizeFunc;
@@ -189,6 +190,14 @@ export class HaTabsSubpageDataTable extends LitElement {
 
   @query("#sort-by-menu") private _sortByMenu!: HaMenu;
 
+  @query("search-input-outlined") private _searchInput!: HTMLElement;
+
+  protected supportedShortcuts(): SupportedShortcuts {
+    return {
+      f: () => this._searchInput.focus(),
+    };
+  }
+
   private _showPaneController = new ResizeController(this, {
     callback: (entries) => entries[0]?.contentRect.width > 750,
   });

src/mixins/keyboard-shortcut-mixin.ts

@@ -1,26 +1,35 @@
 import type { LitElement } from "lit";
 import type { Constructor } from "../types";
 
+declare global {
+  interface SupportedShortcuts {
+    [key: string]: () => void;
+  }
+}
+
 export const KeyboardShortcutMixin = <T extends Constructor<LitElement>>(
   superClass: T
 ) =>
   class extends superClass {
     private _keydownEvent = (event: KeyboardEvent) => {
-      if ((event.ctrlKey || event.metaKey) && event.key === "s") {
+      const supportedShortcuts = this.supportedShortcuts();
+      if ((event.ctrlKey || event.metaKey) && event.key in supportedShortcuts) {
         event.preventDefault();
-        this.handleKeyboardSave();
+        supportedShortcuts[event.key]();
       }
     };
 
     public connectedCallback() {
       super.connectedCallback();
-      this.addEventListener("keydown", this._keydownEvent);
+      window.addEventListener("keydown", this._keydownEvent);
     }
 
     public disconnectedCallback() {
-      this.removeEventListener("keydown", this._keydownEvent);
+      window.removeEventListener("keydown", this._keydownEvent);
       super.disconnectedCallback();
     }
 
-    protected handleKeyboardSave() {}
+    protected supportedShortcuts(): SupportedShortcuts {
+      return {};
+    }
   };

src/panels/config/automation/ha-automation-editor.ts

@@ -852,8 +852,10 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
     ev.detail.callback(this._config);
   }
 
-  protected handleKeyboardSave() {
-    this._saveAutomation();
+  protected supportedShortcuts(): SupportedShortcuts {
+    return {
+      s: () => this._saveAutomation(),
+    };
   }
 
   static get styles(): CSSResultGroup {

src/panels/config/scene/ha-scene-editor.ts

@@ -1215,8 +1215,10 @@ export class HaSceneEditor extends SubscribeMixin(
     }
   }
 
-  protected handleKeyboardSave() {
-    this._saveScene();
+  protected supportedShortcuts(): SupportedShortcuts {
+    return {
+      s: () => this._saveScene(),
+    };
   }
 
   private get _sceneAreaIdWithUpdates(): string | undefined | null {

src/panels/config/script/ha-script-editor.ts

@@ -818,8 +818,10 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
     }
   }
 
-  protected handleKeyboardSave() {
-    this._saveScript();
+  protected supportedShortcuts(): SupportedShortcuts {
+    return {
+      s: () => this._saveScript(),
+    };
   }
 
   static get styles(): CSSResultGroup {