Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Forms inside dropdown prevent click propagation #33044

Closed
tmont opened this issue Feb 10, 2021 · 1 comment · Fixed by #33442
Closed

Forms inside dropdown prevent click propagation #33044

tmont opened this issue Feb 10, 2021 · 1 comment · Fixed by #33442

Comments

@tmont
Copy link

tmont commented Feb 10, 2021

If you have a <form> inside a .dropdown, all click events in the form are prevented from propagating. This is broken in Bootstrap 5, while events used to propagate properly in Bootstrap 4.

Tested on Firefox/Chromium on Linux.

  • Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:84.0) Gecko/20100101 Firefox/84.0
  • Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.66 Safari/537.36

Markup was taken directly from the docs.


Bootstrap 4.6 (should alert when you click on the email input):

https://jsbin.com/wilobevopo/1/edit?html,output

Bootstrap 5 beta2 (does not alert):

https://jsbin.com/qoxojeloni/1/edit?html,output


Seems to stem from this very deliberate line:

EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_FORM_CHILD, e => e.stopPropagation())

There are some other issues related to event propagation in dropdowns, but they are years old and obviously don't apply to the v5 betas.

@XhmikosR
Copy link
Member

It seems this whole propagation thing is broken in v5 in many components. We have a few PRs open for some of the components, like #32943 and #33000.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
2 participants