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! We accept bounties via Bountysource.