Button dropdown links don't work on mobile (android, iOS)

[MikiMullor]

I have simple dropdown buttons we built with 2.04

links are A tags, proper quotes, href='#'

Used to work fine.

Upgraded today to 2.1 and the links in any dropdown button don't work. The dropdown menu opens, but clicking on a link closes the menu without any action. tested on Android 2.3 and iOS 5

Rolledback to 2.04 and everything works again. Anyone else has this issue?

[Stefac]

Same problem here for me. Menu opens, but clicking simply close it. Tested on iPad IOS 5.1

[jwilson]

Would like to add that the dropdown menus from a navbar do work on a iPad (iOS 6), but like the other 2 posters they are not working on a dropdown button.

[dpwolf]

A quick hack to prevent the dropdown menu from being cleared on touch devices:

on line 143 of bootstrap-dropdown.js replace

.on('click.dropdown.data-api touchstart.dropdown.data-api', clearMenus)

with

.on('click.dropdown.data-api', clearMenus)

You won't be able to tap outside the menu to close it, but the dropdown links will work.

[ShivX]

+1

Looking forward to the fix in 2.1.1

[fat]

Hey @MikiMullor,

Thanks for opening this issue! Unfortunately, it looks like it fails to pass the criteria neccessary for submitting to bootstrap. The following things are currently failing:

• should include a jsfiddle/jsbin illustrating the problem if tagged with js but not a feature

For a full list of issue filing guidelines, please refer to the bootstrap issue filing guidelines.

thanks!

[ShivX]

@fat

This seems counter-productive. The issue can be repeated on the bootstrap sample page, and it's pretty critical that Bootstrap button dropdown links don't work on touch devices! :-/

If it means getting it fixed in 2.1.1, Here's a JSFiddle

[dpwolf]

@ShivX thanks!

[Zylinderkatze]

+1 here.

Looking forward to the fix. Any foreseeable release date for it?

  Edit: For those interested, this is my little "workaround" that seems to work, add it after the "bootstrap-dropdown.js" include (I put mine in the $(function() { } section which is located at the end of the page in my case):

$('a.dropdown-toggle').on('touchstart', function(e) {
      // do your stuff here
})

[Starefossen]

Still an issue in 2.1.1. Demo can be found in gh-pages.

[babrewer]

Have also tested with 2.1.1. Dropdown menu links do not work on IOS devices running 5.1.1. They work fine when using RWD Bookmarklet or responsive.is for testing, just not natively on IOS devices.

[mikegreiling]

I'm having this issue too. Very much interested in a fix.

[dcorb]

Having the issue in Chrome Desktop with v.2.1.1 @dpwolf solution worked for us (aka removing touchstart event in that line).

The problem is that both events 'click' and 'touchstart' are triggered. First "touchstart" event and then, 300 ms later comes up the 'click' event .. so clearMenu is called twice.

Probably I'm wrong.. but it's like the browser doesn't have time to handle the 'a' link as normally because touchstart already cleared the menus.

Is there any other solution than treat those 2 event types separetly ? More info https://developers.google.com/mobile/articles/fast_buttons?hl=de-DE

[patrickoehlinger]

Same problem for me with Bootstrap 2.1.1 on iOS 6 :-(

[tonybruess]

I'm experiencing this issue as well :(

[thezoggy]

Pull #4812 looks to address this

[thoughtshop]

Pull #4812 didn't fix dropdown links on iOS for me. It seems the default event is still being prevented.

[crag]

Also have this problem on IOS 6.

[blakeembrey]

I'll fix this up in my PR later today. Shouldn't require too much of a change to get this working as expected.

[stevecoug]

I seem to have a better workaround by adding this line after the line dpwolf mentioned, rather than changing the line:

$('.dropdown-menu').on('touchstart.dropdown.data-api', function(e) { e.stopPropagation() })

I haven't noticed any side effects so far.

[blakeembrey]

@fridgesm Pretty much the same thing I did for my fix in #5067 - However you should bind it to the body otherwise it won't get triggered on any dropdowns after you call that line. Should be a better solution to this, just can't think of on right now

[tetherit]

Added this to my bootstrap_custom.js.coffee file in app/assets/javascript:

  $('.dropdown-menu').on('touchstart.dropdown.data-api', (e) ->
    e.stopPropagation() )

Dropdown menu items now work on iOS :D - Thank you fridgesm for suggesting this.

[ercchy]

well my solution was to add class dropdown to the parent tag on HTML markup. If you have access to it and are able to change it I would recommend doing that, so you don't have to do a js workaround

[babrewer]

Like this: <div class="btn-group dropdown"> <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">

If so, that doesn't work for me.

[ercchy]

My markup looks like this:

 <div class="dropdown btn-group">
      <button class="btn gradient dropdown-toggle" data-toggle="dropdown" id="login">
        Login
      <span class="caret"></span>
       </button>
       <ul class="dropdown-menu">
           <li><a href="some-link">Dropdown1</a></li>                    
       </ul>
</div>

but I am not using any js to initialize behavior. Sometimes it helps if u switch class.

[babrewer]

That doesn't work on my end, not sure what I'm missing, but thanks for the assistance.

[foo4u]

+1

Here's a jsfiddle demonstrating the problem against 2.1.1.

[rraz-np]

Has anyone worked around this issue? workaround mentioned by @fridgesm does not fix the issue in android browser.

[blakeembrey]

@rabiraj In what way doesn't it work? If you are creating the dropdown menu after you add that fix, it won't work. Which is why I said to add it to the body tag. E.g.

$('body').on('touchstart.dropdown', '.dropdown-menu', function (e) { e.stopPropagation(); });

[rraz-np]

thanks, @blakeembrey , earlier I tried $('.dropdown-menu').on('touchstart.dropdown.data-api', function(e) { e.stopPropagation() }) which did not work. Using $('body').on('touchstart.dropdown', '.dropdown-menu', function (e) { e.stopPropagation(); }); as you suggested seems to fix the issue for me.

Also, I noticed with or without the fix, sometimes the dropdown do not open. To test, create 3 dropdown buttons on navbar and touch all the dropdown buttons quickly. It does not open dropdown sometimes.

It may also be the problem due to click and touch. Any suggestions?

[james3burke]

The 4812 patch fixed the problem for me on navbar dropdowns (tested on android chrome), but not dropdowns for other buttons. As mentioned by @ercisson earlier though adding 'dropdown' to the class of the parent tag fixed normal buttons too. This doesn't match the documentation on the twitter bootstrap 'Components' page, but it gets the job done. I've not touched the javascript at all.

[blakeembrey]

@james3burke Could you test #5067 in the same conditions? It's my latest PR and should have all the same fixes found in the issue you just mentioned. Plus I am not sure whether adding .dropdown would fix the issue in the latest version, as that code is now targeting block event propagation on .dropdown form.

[danielspangler]

@blakeembrey I'm new to this thread, but I just tried #5067 on a scenario that wasn't working with some of the other suggestions on this thread and it's working fine now on ios. It also fixed another seemingly unrelated javascript error I was getting on ios when dynamically adding content to the dom and showing it as a modal within a button click handler.

[focalstrategy]

Here's a super minimal test case: http://jsfiddle.net/DSjDa/

I've inlined the CSS and JS, but it's clear that it doesn't work.

[dieselcz]

My workaround is to divide this line in bootstrap-dropdown.js:

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

into two lines:

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

Tested on android 2.3

[auxbuss]

+1 on 2.1.1

I've reverted to 2.0.4 js for now

[pixelbind]

@dieselcz - your solution worked for me on iOS6 with Safari and Dolphin. Thanks!

[danielfranz]

This is what worked for me:

$('a.dropdown-toggle, .dropdown-menu a').on('touchstart', function(e) {
  e.stopPropagation();
});

It also makes dropdown menus that are submenus work as expected on touch devices.

[Bossa573]

@danielfranz That's works form me too, thanks! the dropdown menu won't disappear when I click the blank area, at least the link under the menu can be clicked now

[dieselcz]

@pixelbind Glad to help.

[abhisec]

Is this assigned to somebody and will we see a fix in 2.2?

[dmcycloid]

yep, @dieselcz solution(https://github.com/twitter/bootstrap/issues/4550#issuecomment-8684262) working Android 4.1 Chrome & iOS 6 Safari

[andrewdeandrade]

Hey @MikiMullor,

Thanks for opening this issue! Unfortunately, it looks like it fails to pass the criteria neccessary for submitting to bootstrap. The following things are currently failing:

• should include a jsfiddle/jsbin illustrating the problem if tagged with js but not a feature

For a full list of issue filing guidelines, please refer to the bootstrap issue filing guidelines.

thanks!

[briankiewel]

@malandrew there are already 2 jsfiddles linked in here.

[stevecoug]

@malandrew,

How is this not a critical issue? Dropdowns are completely non-functional on touch devices, and you guys are splitting hairs about filing guidelines? We're all trying to figure out how to fix the issue ourselves, without any help from the core team, on an issue that should be a roadblock.

If touch devices such as iOS and Android are not considered core functionality, then please tell me now so I don't waste my time.

[maimairel]

This malandrew guy is just spamming, he just copy pasted what he wrote above on almost every open issues..

[ivos]

+1

Experienced on Android 2.3.5, BS 2.1.0.

[andrewdeandrade]

Sorry about what looks like spamming. I was playing around with the bootstrap Makefile on my computer and it looks like whatever happened is the sideeffect of running make haunt. I didn't expect any sideeffects of exploring the makefile options to propagate to dozens of issues on github.

@fat if someone else runs make haunt they'll end up causing this problem accidentally.

[artiz]

Please skip commit fbccd6b - it was invalid

[thezoggy]

rebase and force push

[Hillshum]

Because the only workaround listed that actually worked for me was https://github.com/twitter/bootstrap/issues/4550#issuecomment-7987654 I ended up just writing my own event handlers for the links in question that used window.location