From 31afdfd8c453a1e208febc781bce7656ae5f111f Mon Sep 17 00:00:00 2001
From: Gaetan Craig-Riou <gaetan.riou@gmail.com>
Date: Tue, 15 Apr 2025 15:10:32 +1000
Subject: [PATCH] Disable "enter" hotkeys only on tag input element

We are still able to use enter to submit the form on anyother input.The
tag input creates a new tag when enter is pressed
---
 .../tag_list_input_component/tag_list_input_controller.js | 8 ++++++++
 app/webpacker/controllers/bulk_form_controller.js         | 5 -----
 spec/javascripts/stimulus/bulk_form_controller_test.js    | 8 --------
 .../stimulus/tag_list_input_controller_test.js            | 8 ++++++++
 4 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/app/components/tag_list_input_component/tag_list_input_controller.js b/app/components/tag_list_input_component/tag_list_input_controller.js
index b24212fd13..3d0ca779aa 100644
--- a/app/components/tag_list_input_component/tag_list_input_controller.js
+++ b/app/components/tag_list_input_component/tag_list_input_controller.js
@@ -3,6 +3,14 @@ import { Controller } from "stimulus";
 export default class extends Controller {
   static targets = ["tagList", "newTag", "template", "list"];
 
+  connect() {
+    // form hotkeys are enabled for "input" scope, we disable the form submit via enter
+    // on the tag input, so we can use the enter key to create new product tag
+    hotkeys("enter", { scope: "input", element: this.newTagTarget }, function () {
+      event.preventDefault();
+    });
+  }
+
   addTag() {
     // Check if tag already exist
     const newTagName = this.newTagTarget.value;
diff --git a/app/webpacker/controllers/bulk_form_controller.js b/app/webpacker/controllers/bulk_form_controller.js
index 7b6a308008..6e82d2ce33 100644
--- a/app/webpacker/controllers/bulk_form_controller.js
+++ b/app/webpacker/controllers/bulk_form_controller.js
@@ -23,11 +23,6 @@ export default class BulkFormController extends Controller {
   recordElements = {};
 
   connect() {
-    // disable form submit via enter key, so we can use enter key to create new product tags
-    hotkeys("enter", function (event, handler) {
-      event.preventDefault();
-    });
-
     this.submitting = false;
     this.form = this.element;
 
diff --git a/spec/javascripts/stimulus/bulk_form_controller_test.js b/spec/javascripts/stimulus/bulk_form_controller_test.js
index 987d690a70..b09d116b0f 100644
--- a/spec/javascripts/stimulus/bulk_form_controller_test.js
+++ b/spec/javascripts/stimulus/bulk_form_controller_test.js
@@ -9,14 +9,6 @@ describe("BulkFormController", () => {
   beforeAll(() => {
     const application = Application.start();
     application.register("bulk-form", bulk_form_controller);
-
-    // Mock hotkeys.js
-    const mockedHotkeys = jest.fn();
-    global.hotkeys = mockedHotkeys;
-  });
-
-  afterAll(() => {
-    delete global.hotkeys;
   });
 
   describe("Modifying input values", () => {
diff --git a/spec/javascripts/stimulus/tag_list_input_controller_test.js b/spec/javascripts/stimulus/tag_list_input_controller_test.js
index 0efef0b051..7ebfdadcb4 100644
--- a/spec/javascripts/stimulus/tag_list_input_controller_test.js
+++ b/spec/javascripts/stimulus/tag_list_input_controller_test.js
@@ -9,6 +9,14 @@ describe("TagListInputController", () => {
   beforeAll(() => {
     const application = Application.start();
     application.register("tag-list-input-component--tag-list-input", tag_list_input_controller);
+
+    // Mock hotkeys.js
+    const mockedHotkeys = jest.fn();
+    global.hotkeys = mockedHotkeys;
+  });
+
+  afterAll(() => {
+    delete global.hotkeys;
   });
 
   beforeEach(() => {