Dropdown menu not working (when bootstrap 4 is used)

[m-ar-c]

o/

Describe the bug When bootstrap is used on the page converse is embeded, I can click only one time on the menu icon in a muc window, I can't click again to close the contextual menu (but a click elsewhere on the page closes it) and I can't open the menu again, it won't work.

I can see that without bootsrap JS there's only one event on the <div class="dropleft"> element. With bootstrap JS, there's events also on the button element and on the <div class="dropdown-menu"> element (wich are both inside <div class="dropleft">).

Here is a minimal working example in a single html file that reproduce the issue : test_converse_and_bootstrap.zip (It includes only converse and what's needed for bootstrap (4.3.1.).)

Expected behavior Being able to open and close the dropdown menu.

Environment:

• Browsers:
  • Firefox 78.10.0esr,
  • Chromium Version 90.0.4430.93 (Developer Build) built on Debian 11.0
    • OS : Debian 11.0 (64-bit)
• Converse.js version : 7.0.5
• Bootstrap 4.3.1 (same with 4.0.0)

Additional context It seems conversejs doesn't play well with bootstrap, in the demo, there's also the bug described here :

1240 (modal-backdrop preventing to click anywhere, fixable with good z-index value)

--- Want to back this issue? **[Post a bounty on it!](https://app.bountysource.com/issues/98550182-dropdown-menu-not-working-when-bootstrap-4-is-used?utm_campaign=plugin&utm_content=tracker%2F194169&utm_medium=issues&utm_source=github)** We accept bounties via [Bountysource](https://app.bountysource.com/?utm_campaign=plugin&utm_content=tracker%2F194169&utm_medium=issues&utm_source=github).

[jcbrand]

Thanks for a well-written bug report.

Converse uses Bootstrap to render its own UI, and so conflicts arise when it's placed inside a site that also uses Bootstrap.

I'm not sure what the best solution is here. In the upcoming 8.0.0 release Converse itself will be a custom element. In cases like this, it might make sense to enable the shadowDOM so that event handlers from the parent site's bootstrap.js don't also get registered for Converse elements.

[jcbrand]

As a workaround, you can try doing that yourself already. Create a web component with shadowDOM enabled and then load and render Converse inside that component.

[udanieli]

Sorry for the necropost, but this issue is still valid, tried with 9.1.1 and 10.1.2.

I see a slightly different behavior: the conversejs dropdown is fine, but the main website menu (bootstrap 4 dropdown) is not.

To open the dropdown for the first time, you have to click it twice, then it's opening and closing normally.

The first time it triggers the hide.bs.dropdown event instead of show.bs.dropdown, as if it was already open, but it's not.

If I execute $("myelement").dropdown('update') after the loading and initializing of conversejs, I get the exact behavior as @m-ar-c on the dropdown: first click opens, then no closing.

Even loading conversejs inside a custom web component with shadowDOM, I got the same result. Seems that conversejs bootstrap code introduces side effects on the parent site.

Bootstrap version seems the same (4.x). I don't have any clue to investigate further.

[udanieli]

Removing Bootstrap JS from the webpage (bootstrap-bundle.min.js) makes dropdown work correctly. If Converse includes all the Bootstrap JS stuff, and you use the same Bootstrap series (4.x), you should be fine.