Giters

excid3 / tailwindcss-stimulus-components

A set of StimulusJS components for TailwindCSS apps similar to Bootstrap JS components.

Home Page:https://excid3.github.io/tailwindcss-stimulus-components/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Google Chrome Autofill Result Select Causes Modal Close

Petercopter opened this issue · comments

commented

If you have a form inside a Modal component, and you select a result from Google Chrome autofill, it causes the modal to close.

Using the example https://github.com/excid3/tailwindcss-stimulus-components/blob/master/docs/modal.md#usage

<div data-controller="modal" data-action="keydown.esc->modal#close" tabindex="-1" class="relative z-10">

This is the problem right here:

data-action="keydown.esc->modal#close"

I am 99% sure this is something new. We've had forms in modals for months, and this is the first time I'm seeing it.

The first time I noticed it (today) was because we have a user profile in a modal. When you open the modal, it immediately closes because the password is being autofilled, causing the modal to close.

commented

I have the same problem

commented

This should be fixed now that we've moved to the <dialog> element.

commented

Hello, just a comment here for anyone else that runs into this.

Removing the data-action="keydown.esc->modal#close" attribute on the enclosing element(s) prevents the issue, and the user is still able to close the modal with esc since it now must be enclosed in a dialog element which handles this event properly.