Why doesn't Bootstrap button dropdown work on iOS?

Question

It looks like even the bootstrap demo here doesn't work on iOS. You don't seem to be able to select an item from it on iPhone or iPad.

Is there a fix for this?

Answer 1

There is a quick fix as noted in many of the issue comments on github: https://github.com/twitter/bootstrap/issues/2975#issuecomment-8670606

add this script just before your close html tag:

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

I have tested the above method on both ios5 and 6. It works like a charm

---

If you wish to modify the bootstrap javascript you could, instead of the fix above, remove touchstart.dropdown.data-api from the html binding for clearMenus near the bottom of the file.

just change this

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

to this

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