search

excid3 / tailwindcss-stimulus-components

A set of StimulusJS components for TailwindCSS apps similar to Bootstrap JS components.
https://excid3.github.io/tailwindcss-stimulus-components/
MIT License
1.39k stars 140 forks source link

Google Chrome Autofill Result Select Causes Modal Close #207

Closed Petercopter closed 7 months ago

Petercopter commented 1 year ago

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.

solilin commented 8 months ago

I have the same problem

excid3 commented 7 months ago

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

noahhaon commented 5 months ago

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.