Rewrite hotkeys in plain JS

This fixes bugs with latest jQuery version that does not reliably trigger click events
anymore.

app/javascript/alchemy_admin/hotkeys.js

@@ -3,59 +3,59 @@ import "keymaster"
 Alchemy = window.Alchemy || {}
 Alchemy.bindedHotkeys = []
 
-export default function (scope) {
-  // Unbind all previously registered hotkeys.
-  if (!scope) {
-    $(document).off("keypress")
+function showHelp(evt) {
+  if (
+    !$(evt.target).is("input, textarea") &&
+    String.fromCharCode(evt.which) === "?"
+  ) {
+    Alchemy.openDialog("/admin/help", {
+      title: Alchemy.t("help"),
+      size: "400x492"
+    })
+    return false
+  } else {
+    return true
+  }
+}
+
+export default function (scope = document) {
+  // The scope can be a jQuery object because we still use jQuery in Alchemy.Dialog.
+  if (scope instanceof jQuery) {
+    scope = scope[0]
+  }
+
+  // Unbind all previously registered hotkeys if we are not inside a dialog.
+  if (scope === document) {
+    document.removeEventListener("keypress", showHelp)
+    document.addEventListener("keypress", showHelp)
     Alchemy.bindedHotkeys.forEach((hotkey) => key.unbind(hotkey))
   }
 
   // Binds keyboard shortcuts to search fields.
-  const $search_fields = $(".search_input_field", scope)
-  const $search_fields_clear = $(
-    ".search_field_clear, .js_filter_field_clear",
-    scope
+  const search_fields = scope.querySelectorAll(".search_input_field")
+  const search_fields_clear = scope.querySelectorAll(
+    ".search_field_clear, .js_filter_field_clear"
   )
-
   key("alt+f", function () {
     key.setScope("search")
-    $search_fields.focus()
+    search_fields.forEach((el) => el.focus({ focusVisible: true }))
     return false
   })
   Alchemy.bindedHotkeys.push("alt+f")
-
   key("esc", "search", function () {
-    $search_fields_clear.click()
-    $search_fields.blur()
+    search_fields_clear.forEach((el) => el.click())
+    search_fields.forEach((el) => el.blur())
   })
   Alchemy.bindedHotkeys.push("esc")
 
-  if (!scope) {
-    $(document).on("keypress", function (e) {
-      if (
-        !$(e.target).is("input, textarea") &&
-        String.fromCharCode(e.which) === "?"
-      ) {
-        Alchemy.openDialog("/admin/help", {
-          title: Alchemy.t("help"),
-          size: "400x492"
-        })
-        return false
-      } else {
-        return true
-      }
-    })
-  }
-
-  // Binds click events to hotkeys.
+  // Binds click events to buttons with hotkeys.
   //
   // Simply add a data-alchemy-hotkey attribute to your link.
   // If a hotkey is triggered by user, the click event of the element gets triggerd.
   //
-  $("[data-alchemy-hotkey]", scope).each(function () {
-    const $this = $(this)
-    const hotkey = $this.data("alchemy-hotkey")
-    key(hotkey, () => $this.click())
+  scope.querySelectorAll("[data-alchemy-hotkey]").forEach(function (el) {
+    const hotkey = el.dataset.alchemyHotkey
+    key(hotkey, () => el.click())
     Alchemy.bindedHotkeys.push(hotkey)
   })
 }