Merge pull request #11990 from dacook/form-hotkeys

Add keyboard shortcut to submit forms

app/webpacker/js/hotkeys.js

@@ -0,0 +1,20 @@
+import hotkeys from "hotkeys-js";
+
+// Enable hotkeys on form elements
+hotkeys.filter = function (event) {
+  var tagName = (event.target || event.srcElement).tagName;
+  hotkeys.setScope(/^(INPUT|TEXTAREA|SELECT|BUTTON)$/.test(tagName) ? "input" : "other");
+  return true;
+};
+
+// Submit form
+// Although 'enter' will submit the form in many cases, it doesn't cover elements such
+// as select and textarea. This shortcut is a standard used across many major websites.
+hotkeys("ctrl+enter, command+enter", function (event, handler) {
+  const form = event.target.form;
+
+  // If element has a non-angular form
+  if (form && !form.classList.contains("ng")) {
+    form.submit();
+  }
+});

app/webpacker/packs/admin.js

@@ -1,6 +1,7 @@
 import "controllers";
 import "channels";
 import "@hotwired/turbo";
+import "../js/hotkeys";
 import "../js/mrujs";
 import "../js/matomo";
 import "../js/moment";

app/webpacker/packs/application.js

@@ -1,5 +1,6 @@
 import "controllers";
 import "@hotwired/turbo";
+import "../js/hotkeys";
 import "../js/mrujs";
 import "../js/matomo";
 import "../js/moment";

package.json

@@ -26,6 +26,7 @@
     "debounced": "^0.0.5",
     "flatpickr": "^4.6.9",
     "foundation-sites": "^5.5.3",
+    "hotkeys-js": "^3.13.3",
     "jquery-ui": "1.13.2",
     "js-big-decimal": "^2.0.4",
     "moment": "^2.30.1",

yarn.lock

@@ -4465,6 +4465,11 @@ homedir-polyfill@^1.0.1:
   dependencies:
     parse-passwd "^1.0.0"
 
+hotkeys-js@^3.13.3:
+  version "3.13.3"
+  resolved "https://registry.yarnpkg.com/hotkeys-js/-/hotkeys-js-3.13.3.tgz#b0a9f243bb1e9cacb93d3772a9e1f6013c0698a3"
+  integrity sha512-IEiMBNRJZMhWyNDsvww8LYC8vZYyj2/w2GgXPg0ljq/K3SYvOJH6NRMqzF7z2Fwaq2AzKSvmvECREzFleKSeow==
+
 hpack.js@^2.1.6:
   version "2.1.6"
   resolved "https://registry.yarnpkg.com/hpack.js/-/hpack.js-2.1.6.tgz#87774c0949e513f42e84575b3c45681fade2a0b2"