Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Email autocomplete on <input> triggers keydown.esc data-action event #743

Open
marcoroth opened this issue Dec 8, 2023 · 4 comments
Open
Labels

Comments

@marcoroth
Copy link
Member

marcoroth commented Dec 8, 2023

If you setup a data-action with a keydown.esc event it will trigger the action whenever you autocomplete the <input> with a selection from the browser popup:

<form data-controller="modal" data-action="keydown.esc@window->modal#close">
  <input type="email" autocomplete="email" placeholder="Email">
</form>

Here's a codepen to demonstrate the behaviour:
https://codepen.io/marcoroth/pen/vYbPNeE?editors=1010

It looks like it's not only specific to the esc modifier, as it also happens for any other modifier or the plain keydown event as well. It seems like the autocomplete in browsers is being simulated by emitting a series of keydown, keyup and change events to mimic user input.

Maybe we can detect if an event wasn't actual human input and then prevent the action from being run.

/cc @tylerklose

@marcoroth marcoroth added the bug label Dec 8, 2023
@rik
Copy link
Contributor

rik commented Dec 8, 2023

In Safari, the event emitted is of type CustomEvent, not KeyboardEvent. And that's messing up the key filtering:

if (event instanceof KeyboardEvent && this.action.shouldIgnoreKeyboardEvent(event)) {
return false
}

@rik
Copy link
Contributor

rik commented Dec 8, 2023

I couldn't get Chrome to autocomplete emails so I couldn't test the type of Events it emits in this situation.

@tsmd
Copy link

tsmd commented Dec 9, 2023

Hi, @marcoroth,
I have submitted a pull request to fix the issue you raised in #713. I would be grateful if you could do a review if you could.

@alexander-schranz
Copy link
Contributor

I can confirm this issue is happening also for other inputs when using Safari:

safari-test

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

No branches or pull requests

4 participants