From bf624f5ca7f99aa8842d012caf47e0f71c1732d4 Mon Sep 17 00:00:00 2001
From: Jan-Philipp Benecke <jan-philipp@bnck.me>
Date: Wed, 11 Dec 2024 08:34:27 +0100
Subject: [PATCH] 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   | 11 ++++++++++-
 src/mixins/keyboard-shortcut-mixin.ts         | 19 ++++++++++++++-----
 .../config/automation/ha-automation-editor.ts |  6 ++++--
 src/panels/config/scene/ha-scene-editor.ts    |  6 ++++--
 src/panels/config/script/ha-script-editor.ts  |  6 ++++--
 5 files changed, 36 insertions(+), 12 deletions(-)

diff --git a/src/layouts/hass-tabs-subpage-data-table.ts b/src/layouts/hass-tabs-subpage-data-table.ts
index aefbb63a2358..9effe9274232 100644
--- a/src/layouts/hass-tabs-subpage-data-table.ts
+++ b/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,
   });
diff --git a/src/mixins/keyboard-shortcut-mixin.ts b/src/mixins/keyboard-shortcut-mixin.ts
index 1f92d0e08389..ac73c1fa2014 100644
--- a/src/mixins/keyboard-shortcut-mixin.ts
+++ b/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 {};
+    }
   };
diff --git a/src/panels/config/automation/ha-automation-editor.ts b/src/panels/config/automation/ha-automation-editor.ts
index aff655f7b553..fa01226bee09 100644
--- a/src/panels/config/automation/ha-automation-editor.ts
+++ b/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 {
diff --git a/src/panels/config/scene/ha-scene-editor.ts b/src/panels/config/scene/ha-scene-editor.ts
index 96b11045503b..21d44d110831 100644
--- a/src/panels/config/scene/ha-scene-editor.ts
+++ b/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 {
diff --git a/src/panels/config/script/ha-script-editor.ts b/src/panels/config/script/ha-script-editor.ts
index 6075367a3fa6..a9606e00bac4 100644
--- a/src/panels/config/script/ha-script-editor.ts
+++ b/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 {