-
-
Notifications
You must be signed in to change notification settings - Fork 79.1k
Multiple dropdowns: Fix when inside same tag #37011
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
Multiple dropdowns: Fix when inside same tag #37011
Conversation
fb8e25f
to
1e497a2
Compare
js/src/dropdown.js
Outdated
@@ -405,7 +405,7 @@ class Dropdown extends BaseComponent { | |||
|
|||
event.preventDefault() | |||
|
|||
const getToggleButton = SelectorEngine.findOne(SELECTOR_DATA_TOGGLE, event.delegateTarget.parentNode) | |||
const getToggleButton = this.matches(SELECTOR_DATA_TOGGLE) ? this : SelectorEngine.prev(this, SELECTOR_DATA_TOGGLE)[0] |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
As on Line 98 you search prev & next, I suppose we should keep the same attitude here.
In general, I would prefer to keep the right markup solution fixing the docs and adding it in migration notes, instead of doing tricks on javascipt.
I don't know if we would count that, as a breaking change but the specific example/problem, negates the suggested markup
/cc @twbs/team
This PR sounds good to me if I understand it right. I get the urge for having less clever JS, but a code snippet we include in our docs no longer works after an update, so I think we should continue to support it without extra work. It's maybe less idea for us, but it keeps the developer experience better for folks building with Bootstrap :). |
Ok, let's tackle it this way @louismaximepiton please leave a comment (// todo v6 revert #37011 & change markup https://getbootstrap.com/docs/5.2/forms/input-group/ ) |
538ce91
to
9f5c626
Compare
@louismaximepiton please add at least a test too, to cover this case |
Thanks both! Let me know when this is good to merge :). |
Are you fine with the added tests cases ? |
You are more than great @louismaximepiton . Thank you a lot 🚀 |
3d6223f
to
b6b7f17
Compare
Proposal to fix #36803 as a quick win. I was wondering if the
data-target
was an idea for v5 or v6.Solution
Partial revert of #35752. For l.408 -> Use of the previous js to instantiate the dropdown with the great button.
Partial revert of #35748. For l.98 -> Use the previous
_getMenuElement()
code to have the great menu when called with the great button.How to check the solution
Go on the input group section.
Check that the last example (the one with 2 dropdowns) display the great dropdown menu for each dropdown toggle (
Action before
orAction
)Things remaining