Bootstrap dropdown-menu doesn't get close when clicking an element

Question

I'm firing the bootstrap dropdown menu by using the javascript function dropdown('toggle') as stated in their docs.

Usually dropdowns would hide whenever you click outside them or you select one of their options.

This doesn't happen when firing it through javascript.

In this reproduction you'll see two menus:

• One which works as expected as its fired using the "components" trigger
• And another one, using the right click, which doesn't work as expected. (it doesn't get closed on click outside or even on element click)

I was able to "manually" get rid of the dropdown menu when clicking outside it by using the following:

$('body').removeClass('open');

But I'm not quite sure why dropdown menus don't work in the same way as when you fire them by the normal procedure. And having to manually hide them doesn't seem like the best solution...

Solution 1

I got an answer from boostrap issues forum in which they explained how to deal with it:

B. You're missing a <div class="dropdown"> around the <ul class="dropdown-menu">

C. You're missing an element with data-toggle="dropdown" (Not explicitly documented, but followed by all the examples and related to the warning in http://getbootstrap.com/javascript/#callout-dropdowns-data-required )

Here's a reproduction of the solution. (right anywhere click to see the dropdown menu)

HTML markup

<div class="wrapper">
    <span data-toggle="dropdown"></span>
    <ul class="dropdown-menu" id="menu">
        <li><a href="#">Download file</a></li>
        <li><a href="#">Upload file</a></li>
    </ul>
</div>

Javascript

//context menu for orders table
$(document).on("contextmenu", "body", function (event) {
    //we won't show the default context menu
    event.preventDefault();

    //showing it close to our cursor
    $('#menu').dropdown('toggle').css({
        top: (event.pageY) + "px",
        left: (event.pageX) + "px"
    });
});

Solution 2

Opening in Javascript does not work well with data-toggles. I once used this code to activate the dropdown from Javascript:

$(document).on("contextmenu", "body", function (event) {
    //we won't show the default context menu
    event.preventDefault();

    //showing it close to our cursor
    $('#menu').css({
        top: (event.pageY) + "px",
        left: (event.pageX) + "px"
    }).show();

    $(document).on('click.contextmenu', function () {
         $('#menu').hide();
         $(document).off('click.contextmenu');
    });
});

Comments

[DevAlien]

Your example works for me. Or maybe I do somoething "wrong"

[Alvaro]

In the example you'll see two different drop menus. One which works as expected as its fired using the "components" trigger. And another one, when using the right click of your mouse, which doesn't work as expected. (it doesn't get closed)

[Alvaro]

Still you have to do it manually and that's what I was trying to avoid.