using .dropdown('toggle') twice in JavaScript doesn't return the dropdown to its original state

[evanp]

If you use the JavaScript interface for dropdown -- .dropdown("toggle") -- multiple times, the "open" class isn't cleared, so the dropdown stays open.

https://gist.github.com/evanp/6456479

[cvrebert]

For future reference, a JS Bin or JSFiddle is preferred.
Here's a JS Bin of the Gist: http://jsbin.com/osACabU/3/edit

[ghost]

I'm working on a major US retail site and need this to work. Is there a workaround or patch? This bug is a month old and, while it's not critical (as in halting the browser), it's still fairly major as something very fundamental is not working.

[devinmcinnis]

There are two problems here.

The first is the dropdown usage documentation. It says that there are 2 ways to use the dropdown: data-attribute or JavaScript. The problem is, the JavaScript method relies on the attribute data-toggle="dropdown" for it to close the menu.

js/dropdown.js

  toggle = '[data-toggle="dropdown"]'

  ..

  function clearMenus() {
    $(backdrop).remove()
    $(toggle).each(function (e) {
      var $parent = getParent($(this))
      if (!$parent.hasClass('open')) return
      $parent.trigger(e = $.Event('hide.bs.dropdown'))
      if (e.isDefaultPrevented()) return
      $parent.removeClass('open').trigger('hidden.bs.dropdown')
    })
  }

The other problem is (most likely because it's not working) with the gist. You have 2 click events on the same menu item which, after you've clicked it, will now run twice. Once on the click and once on the toggle essentially opening and closing the dropdown.

Solution: For now, use the data-toggle attribute, remove your JavaScript, and it'll be fine.

[evanp]

@devinmcinnis No, actually, "toggle" doesn't toggle. The problem is here:

https://github.com/twbs/bootstrap/blob/master/js/dropdown.js#L42

and here

https://github.com/twbs/bootstrap/blob/master/js/dropdown.js#L53

Bootstrap only toggles the "open" class if it's already set. So sending the "toggle" message doesn't actually "toggle" the class, so the widget doesn't ever close -- it just stays open.

I think it'd be pretty easy to throw an else on that if to clear the class.

As an aside, I've personally worked around this problem by toggling the class manually.

[devinmcinnis]

@evanp Bootstrap toggles the "open" class if it's not set. It will remove the "open" class if it is set.

The quick fix for this would be to set toggle:

toggle = '[data-toggle=dropdown], .dropdown > a'

The problem would then be that every dropdown would be initialized on load and that's probably not desired (but I also don't know a use case where you wouldn't want a dropdown initialized).

[evanp]

Yokay. It's been a while since I submitted this issue; I'll go back in and review the exact cause of the problem. In the meanwhile, can you put together some sample code that successfully toggles a dropdown on and off via Javascript?

[devinmcinnis]

You can use the data-attribute and .stopImmediatePropagination()

http://jsbin.com/osACabU/28

[fat]

added a note to the docs about the reliance on the data attribute, hope that helps – thanks @devinmcinnis for the support