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

Created on 9 Sep 2015 · 3Comments · Source: twbs/bootstrap

I'm firing the bootstrap v3.3.5 dropdown menu by using the javascript function dropdown('toggle') as stated in the 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 of the mouse, 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...

I opened the same issue in stackoverflow but I didn't get a good solution.

docs v3

Source

alvarotrigo

Most helpful comment

A. You're calling $('#menu').dropdown('toggle') twice in your event handler method
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 )
D. The examples imply that dropdown methods are supposed to be invoked on the data-toggle="dropdown" element, not the class="dropdown-menu" element, but apparently there are exceptions to that.

Revised example: http://jsfiddle.net/cvrebert/wnjmb1La/

Action items:

: Further clarify in http://getbootstrap.com/javascript/#callout-dropdowns-data-required that a trigger element is always required, even for programmatic triggering
: Determine which elements of the dropdown the dropdown methods are supposed to work on, and document this more explicitly

cvrebert on 9 Sep 2015

👍4

All 3 comments

Revised example: http://jsfiddle.net/cvrebert/wnjmb1La/

Action items:

: Further clarify in http://getbootstrap.com/javascript/#callout-dropdowns-data-required that a trigger element is always required, even for programmatic triggering
: Determine which elements of the dropdown the dropdown methods are supposed to work on, and document this more explicitly

cvrebert on 9 Sep 2015

👍4

B. You're missing a
around the

It doesn't seem to be required, its just to make sure its using a relative position as far as I understood.

Here's the example without it.

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 )

That is what it seems to be the trick! Adding an invisible element with the data-toggle attribute.

Thanks for it!

alvarotrigo on 9 Sep 2015

Bootstrap 3 is no longer being officially developed or supported.

All work has moved onto our next major release, v4. As such, this issue or pull request is being closed as a "won't fix." For additional help and support, we recommend utilizing our community resources. Thanks for your understanding, and see you on the other side of v4!

<3,
@mdo and team