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

[marcoroth]

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

[rik]

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

stimulus/src/core/binding.ts

Lines 89 to 91 in 349dc16

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

[rik]

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

[tsmd]

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]

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

[gbere]

I have a similar issue on Chrome when:

    <dialog
            data-dialog-target="dialog"
            data-action="keydown.meta+k@window->dialog#open keydown.ctrl+k@window->dialog#open"
    >
        <twig:SearchSite/>
    </dialog>

And when the username and/or password fields are automatically filled in, a keydown event is triggered.