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

Multiple dropdowns: Fix when inside same tag #37011

Merged

Conversation

louismaximepiton
Copy link
Member

@louismaximepiton louismaximepiton commented Aug 23, 2022

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 or Action)

Things remaining

  • Do the unit tests once the solution is approved

@louismaximepiton louismaximepiton requested a review from a team as a code owner August 23, 2022 15:21
@louismaximepiton louismaximepiton force-pushed the main-lmp-multiple-dropdowns-on-same-line branch from fb8e25f to 1e497a2 Compare August 23, 2022 15:32
@@ -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]
Copy link
Member

@GeoSot GeoSot Aug 31, 2022

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

@mdo
Copy link
Member

mdo commented Sep 1, 2022

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 :).

@GeoSot
Copy link
Member

GeoSot commented Sep 1, 2022

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/ )

@GeoSot GeoSot force-pushed the main-lmp-multiple-dropdowns-on-same-line branch from 538ce91 to 9f5c626 Compare September 1, 2022 07:37
@GeoSot
Copy link
Member

GeoSot commented Sep 1, 2022

@louismaximepiton please add at least a test too, to cover this case

@mdo
Copy link
Member

mdo commented Sep 1, 2022

Thanks both! Let me know when this is good to merge :).

@louismaximepiton
Copy link
Member Author

Are you fine with the added tests cases ?

@GeoSot
Copy link
Member

GeoSot commented Sep 2, 2022

You are more than great @louismaximepiton . Thank you a lot 🚀

@GeoSot GeoSot force-pushed the main-lmp-multiple-dropdowns-on-same-line branch from 3d6223f to b6b7f17 Compare September 2, 2022 07:40
@GeoSot GeoSot merged commit 337068f into twbs:main Sep 2, 2022
@louismaximepiton louismaximepiton deleted the main-lmp-multiple-dropdowns-on-same-line branch September 2, 2022 09:53
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
No open projects
Status: Done
Development

Successfully merging this pull request may close these issues.

Dropdown multiple in same line collapse the same dropdown in diferent button
4 participants