Move keyUp handling to JS hook.

errantsky · Nov 19, 2024 · 241d0b8 · 241d0b8
1 parent 5557337
commit 241d0b8
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 7 deletions.
diff --git a/assets/js/app.js b/assets/js/app.js
@@ -38,7 +38,23 @@ let Hooks = {}
 Hooks.FocusSearch = {
   mounted() {
     this.handleEvent("focus_search_input", () => {
-      document.getElementById("search-input").focus()
+      document.getElementById("search-input").focus();
+    });
+
+    window.addEventListener("keydown", (event) => {
+      const activeElement = document.activeElement;
+
+      if (
+        activeElement.tagName === "INPUT" ||
+        activeElement.tagName == "TEXTAREA" ||
+        activeElement.isContentEditable
+      ) {
+        return;
+      }
+
+      if (["/", "n"].includes(event.key)) {
+        this.pushEvent("keyboard-shortcut", { key: event.key })
+      }
     });
   },
 };

diff --git a/lib/phoenix_vault_web/live/snapshot_live/index.ex b/lib/phoenix_vault_web/live/snapshot_live/index.ex
@@ -157,11 +157,6 @@ defmodule PhoenixVaultWeb.SnapshotLive.Index do
     end
   end
 
-  @impl true
-  def handle_event("keyboard-shortcut", _, socket) do
-    {:noreply, socket}
-  end
-
   @impl true
   def handle_event("refresh_snapshot", %{"sid" => snapshot_id}, socket) do
     Logger.debug("Triggering a refresh event.")

diff --git a/lib/phoenix_vault_web/live/snapshot_live/index.html.heex b/lib/phoenix_vault_web/live/snapshot_live/index.html.heex
@@ -10,7 +10,6 @@
 <form phx-submit="search" phx-change="change_query" class="search-form">
   <input
     id="search-input"
-    phx-window-keyup="keyboard-shortcut"
     phx-hook="FocusSearch"
     type="text"
     name="query"