Email autocomplete on `<input>` triggers `keydown.esc` data-action event
Author: marcorothCreated Dec 8, 2023Updated Apr 8, 2025
Labelsbug
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
Source: hotwired/stimulus