Fix modal being displayed when dropdown toggle is clicked

[alhernandez25]

Description

When a dropdown toggle is embedded in a div that is also a toggle for a modal, both the modal and the dropdown are triggered. This may be intentional, but if not, this fix would temporarily disable the modal toggle.

Motivation & Context

When using Bootstrap for my own project, I had a div with data-bs-toggle=modal and inside this div I also placed a dropdown toggle. My expectation was if I clicked on the dropdown toggle, it would take precedence over the modal toggle and open the dropdown and not the modal

Type of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Refactoring (non-breaking change)
• Breaking change (fix or feature that would change existing functionality)

Checklist

• I have read the contributing guidelines
• My code follows the code style of the project (using npm run lint)
• My change introduces changes to the documentation
• I have updated the documentation accordingly
• I have added tests to cover my changes
• All new and existing tests passed

Live previews

• https://deploy-preview-{your_pr_number}--twbs-bootstrap.netlify.app/

Related issues

[julien-deramond]

Thank you for submitting a PR @alhernandez25

My first feedback is that the dropdown component should remain autonomous and should not import the modal in its source code. I haven't checked the context of the fix, but we should find a more generic way to do that if possible.

Moreover, all JavaScript modifications in the codebase should have corresponding unit tests.

Could you please also try to create a StackBlitz or CodePen with the issue you encountered? It would help understanding the issue more rapidly on our side 🙏

[alhernandez25]

Thank you for submitting a PR @alhernandez25

My first feedback is that the dropdown component should remain autonomous and should not import the modal in its source code. I haven't checked the context of the fix, but we should find a more generic way to do that if possible.

Moreover, all JavaScript modifications in the codebase should have corresponding unit tests.

Could you please also try to create a StackBlitz or CodePen with the issue you encountered? It would help understanding the issue more rapidly on our side 🙏

Will do! Thank you