Email autocomplete on `<input>` triggers `keydown.esc` data-action event
marcoroth opened this issue · comments
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
In Safari, the event emitted is of type CustomEvent
, not KeyboardEvent
. And that's messing up the key filtering:
Lines 89 to 91 in 349dc16
I couldn't get Chrome to autocomplete emails so I couldn't test the type of Events it emits in this situation.
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.