Dropdown menus don't get closed when selecting an option #4497

Closed
lrlopez opened this Issue Aug 21, 2012 · 21 comments
@lrlopez

[Tested on Chrome 21, Safari 6 and Firefox 14]

I've upgraded Bootstrap on a test-branch and dropdown menus no longer close automatically once an option is selected. User has to click outside for the menu to disappear.

The problem is reproducible in the official docs: http://twitter.github.com/bootstrap/javascript.html#dropdowns

Did I miss something on the changelog about this new behaviour? If this is a "WON'T FIX", is there any workaround to force them to close?

@kr3l

I have the same problem. Dropdowns used to close automatically when selecting an option, after upgrade to 2.1.0 they do not close anymore when an option is selected.

@lphm

I have several dropdown into a navbar and it's always the first initialized who works well. Others do not want to close when I choose (click) an option OR if I click somewhere else on the page to close it.

The problem is here since the 2.1 version.

@jon301

Hi,

Same problem for me :

http://jsfiddle.net/7ptXA/

@zachlowry

I've commented on the line of code that caused this here: c9cef74#js/bootstrap-dropdown.js. Change the target for the event to ".dropdown form" and it should be fixed.

@kr3l

@zachlowry This fixes the issue for me, thanks

@jayseb

Removing "form" from the selector also prevents menu items using rails jquery_ujs from working (e.g. :method => :delete for a sign out link).

@mhuggins

+1 on this issue

@internalfx

+1 on this issue

@mfansler

Here's an interim solution until the 2.1.1 comes through:

$('body')
  .off('click.dropdown touchstart.dropdown.data-api', '.dropdown')
  .on('click.dropdown touchstart.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })

Edit: I should add, in case it's not clear, that this workaround is really only intended for those loading Bootstrap off a CDN. If you're hosting your own code, just fix it directly. :P

@mhuggins

Thanks for the workaround!

@benrhere

+1 on this...

@tonybruess

+1 for me too. Glad I'm not the only one that was confused.

@ShivX

I'm somewhat confused as to why 4756 was closed - the fix listed above does NOT fix that specific issue?

EDIT: Never mind, probably in reference to 4550

@fat fat closed this Aug 27, 2012
@fat fat reopened this Aug 27, 2012
@fat
Bootstrap member

added the form bit back, which fixes this – will look into another way of handling the mobile stuff

@fat fat closed this Aug 28, 2012
@mhuggins

@fat - I'm not seeing the commit in the Github commits that fixes this. Am I missing something?

@mhuggins

Ahh, didn't realize that's how Twitter does it. Thanks!

@ybart

A temporary workaround can be found here for incompatibilty with jquery-rails while waiting 2.1.1 release : seyhunak/twitter-bootstrap-rails#343

@RusAlex

the same issue

@marcelometal

$('.dropdown-menu select, .dropdown-menu textearea').click(function(e) {
e.stopPropagation();
})

@AramZS AramZS added a commit to PressForward/pressforward that referenced this issue Mar 2, 2015
@AramZS AramZS Setting up click to close for dropdowns
Another possible solution -
twbs/bootstrap#4497
For #549
f4d8c21
@reunix

perfect marcelometal!!!

@cvrebert cvrebert locked and limited conversation to collaborators Dec 17, 2015
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.