From 078b21cff518efd353878b84d2152be46303b257 Mon Sep 17 00:00:00 2001
From: Shimada Takayuki <taka@tsmd.jp>
Date: Sun, 13 Aug 2023 16:36:04 +0900
Subject: [PATCH] Add support for key events with autocomplete in Chrome

In Google Chrome, when a text field has focus and an input suggestion is confirmed, a `keydown` event is fired. However, the event interface is not a `KeyboardEvent`, which causes the event handler to fail to determine whether it should be called. This change adds a test to ensure that the event handler is called correctly in this scenario.
---
 src/core/binding.ts                                       | 8 ++++++++
 src/tests/modules/core/action_keyboard_filter_tests.ts    | 8 ++++++++
 .../modules/core/action_params_case_insensitive_tests.ts  | 2 +-
 src/tests/modules/core/action_params_tests.ts             | 2 +-
 src/tests/modules/core/action_tests.ts                    | 4 ++--
 src/tests/modules/core/event_options_tests.ts             | 8 ++++----
 6 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/src/core/binding.ts b/src/core/binding.ts
index 33958667..b5dab5fd 100644
--- a/src/core/binding.ts
+++ b/src/core/binding.ts
@@ -86,6 +86,14 @@ export class Binding {
   private willBeInvokedByEvent(event: Event): boolean {
     const eventTarget = event.target
 
+    if (
+      !(event instanceof KeyboardEvent) &&
+      event instanceof Event &&
+      (event.type === "keydown" || event.type === "keyup")
+    ) {
+      return false
+    }
+
     if (event instanceof KeyboardEvent && this.action.shouldIgnoreKeyboardEvent(event)) {
       return false
     }
diff --git a/src/tests/modules/core/action_keyboard_filter_tests.ts b/src/tests/modules/core/action_keyboard_filter_tests.ts
index 64a9303c..bd1fdb7d 100644
--- a/src/tests/modules/core/action_keyboard_filter_tests.ts
+++ b/src/tests/modules/core/action_keyboard_filter_tests.ts
@@ -22,6 +22,7 @@ export default class ActionKeyboardFilterTests extends LogControllerTestCase {
       <button id="button8" data-action="keydown.a->a#log keydown.b->a#log2"></button>
       <button id="button9" data-action="keydown.shift+a->a#log keydown.a->a#log2 keydown.ctrl+shift+a->a#log3">
       <button id="button10" data-action="jquery.custom.event->a#log jquery.a->a#log2">
+      <button id="button11" data-action="keydown.esc->a#log keydown.tab->a#log2 keyup.a->a#log3">
     </div>
   `
 
@@ -197,4 +198,11 @@ export default class ActionKeyboardFilterTests extends LogControllerTestCase {
     await this.triggerEvent(button, "jquery.a")
     this.assertActions({ name: "log2", identifier: "a", eventType: "jquery.a", currentTarget: button })
   }
+
+  async "test ignore keydown event with input suggestion in Chrome"() {
+    const button = this.findElement("#button11")
+    await this.nextFrame
+    await this.triggerEvent(button, "keydown")
+    this.assertActions()
+  }
 }
diff --git a/src/tests/modules/core/action_params_case_insensitive_tests.ts b/src/tests/modules/core/action_params_case_insensitive_tests.ts
index 4f2cfe7b..36165b16 100644
--- a/src/tests/modules/core/action_params_case_insensitive_tests.ts
+++ b/src/tests/modules/core/action_params_case_insensitive_tests.ts
@@ -40,7 +40,7 @@ export default class ActionParamsCaseInsensitiveTests extends ActionParamsTests
   async "test global event return element params where the action is defined"() {
     this.actionValue = "keydown@window->CamelCase#log"
     await this.nextFrame
-    await this.triggerEvent("#outside", "keydown")
+    await this.triggerKeyboardEvent("#outside", "keydown", { bubbles: true })
 
     this.assertActions({ identifier: "CamelCase", params: this.expectedParamsForCamelCase })
   }
diff --git a/src/tests/modules/core/action_params_tests.ts b/src/tests/modules/core/action_params_tests.ts
index d53fb0f4..85a8c3f2 100644
--- a/src/tests/modules/core/action_params_tests.ts
+++ b/src/tests/modules/core/action_params_tests.ts
@@ -40,7 +40,7 @@ export default class ActionParamsTests extends LogControllerTestCase {
   async "test global event return element params where the action is defined"() {
     this.actionValue = "keydown@window->c#log"
     await this.nextFrame
-    await this.triggerEvent("#outside", "keydown")
+    await this.triggerKeyboardEvent("#outside", "keydown", { bubbles: true })
 
     this.assertActions({ identifier: "c", params: this.expectedParamsForC })
   }
diff --git a/src/tests/modules/core/action_tests.ts b/src/tests/modules/core/action_tests.ts
index 4e3c7718..6d669094 100644
--- a/src/tests/modules/core/action_tests.ts
+++ b/src/tests/modules/core/action_tests.ts
@@ -41,13 +41,13 @@ export default class ActionTests extends LogControllerTestCase {
   }
 
   async "test global actions"() {
-    await this.triggerEvent("#outside", "keydown")
+    await this.triggerKeyboardEvent("#outside", "keydown", { bubbles: true })
     this.assertActions({ name: "log", eventType: "keydown" })
   }
 
   async "test nested global actions"() {
     const innerController = this.controllers[1]
-    await this.triggerEvent("#outside", "keyup")
+    await this.triggerKeyboardEvent("#outside", "keyup", { bubbles: true })
     this.assertActions({ controller: innerController, eventType: "keyup" })
   }
 
diff --git a/src/tests/modules/core/event_options_tests.ts b/src/tests/modules/core/event_options_tests.ts
index 45027cd3..9eeb2806 100644
--- a/src/tests/modules/core/event_options_tests.ts
+++ b/src/tests/modules/core/event_options_tests.ts
@@ -56,8 +56,8 @@ export default class EventOptionsTests extends LogControllerTestCase {
   async "test global once actions"() {
     await this.setAction(this.buttonElement, "keydown@window->c#log:once")
 
-    await this.triggerEvent("#outside", "keydown")
-    await this.triggerEvent("#outside", "keydown")
+    await this.triggerKeyboardEvent("#outside", "keydown", { bubbles: true })
+    await this.triggerKeyboardEvent("#outside", "keydown", { bubbles: true })
 
     this.assertActions({ name: "log", eventType: "keydown" })
   }
@@ -132,7 +132,7 @@ export default class EventOptionsTests extends LogControllerTestCase {
     await this.setAction(this.element, "keydown->c#log")
     await this.setAction(this.buttonElement, "keydown->c#log2:stop")
 
-    await this.triggerEvent(this.buttonElement, "keydown")
+    await this.triggerKeyboardEvent(this.buttonElement, "keydown", { bubbles: true })
 
     this.assertActions({ name: "log2", eventType: "keydown" })
   }
@@ -157,7 +157,7 @@ export default class EventOptionsTests extends LogControllerTestCase {
   async "test prevent option with explicit event"() {
     await this.setAction(this.buttonElement, "keyup->c#log:prevent")
 
-    await this.triggerEvent(this.buttonElement, "keyup")
+    await this.triggerKeyboardEvent(this.buttonElement, "keyup", { bubbles: true, cancelable: true })
 
     this.assertActions({ name: "log", eventType: "keyup", defaultPrevented: true })
   }