Skip to content

Add support for key events with autocomplete in Chrome#713

Open
tsmd wants to merge 1 commit into
hotwired:mainfrom
tsmd:support-autocomplete-chrome
Open

Add support for key events with autocomplete in Chrome#713
tsmd wants to merge 1 commit into
hotwired:mainfrom
tsmd:support-autocomplete-chrome

Conversation

@tsmd

@tsmd tsmd commented Aug 13, 2023

Copy link
Copy Markdown

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.

I have created a minimal reproduction script; please setup Google Chrome to autocomplete the email address and select the candidate that appears. You will see that all event handlers are executed regardless of the key type.
https://codepen.io/tsmd/pen/rNQgoWg?editors=1010

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.
@drewblas

Copy link
Copy Markdown

We are affected by this as well and it causes our keydown triggers to trigger from the chrome autocomplete selections

@oliverguenther

Copy link
Copy Markdown

We're affected by this as well, selecting an autocomplete item with e.g., a keydown#esc-> event causes it to be called despite the key not being pressed.

@oobie11

oobie11 commented Sep 5, 2024

Copy link
Copy Markdown

Having this issue too in Safari. data-action="keydown.esc->modal#close" is triggered when selecting an autocomplete option.

@abrieff

abrieff commented Nov 7, 2024

Copy link
Copy Markdown

What is the status of this?

@Tonksthebear

Copy link
Copy Markdown

Also curious as I just ran into it as well.

@jvon1904

jvon1904 commented May 7, 2025

Copy link
Copy Markdown

I just discovered this issue as well. I have a Stimulus controller called form_controller where you can exit the input form by typing Escape. I have it set on keyup instead of keydown: action: "keyup.esc->form#cancel". Selecting the browser auto suggestion was triggering form#cancel.

FWIW, for the time being, my workaround is just to add this line (logic taken from this PR) inside the Stimulus method:

if (!(e instanceof KeyboardEvent)) {
  return;
}

Hope this helps someone in my shoes!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Development

Successfully merging this pull request may close these issues.

7 participants