Twitter Bootstrap Dropdowns Unclickable On Tablets

Question

On the menus for our site we have a button dropdown for user account options that changes dynamically based on their username and logged in status. It works great in the browsers, however, on Android tablets(using Firefox) we can't seem to click any of the links in the dropdown, although the links DO appear, whenever you click them the dropdown goes away and nothing happens.

I'm using the latest version of Bootstrap(2.1.1), with the dropdown plugin. It works on desktops, and it's clickable by the tablets, the links just close the popup when clicked.

Here's the code:

     <div class="btn-group pull-right">
        <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
          <i class="icon-user"></i> <?php echo $_SESSION['username']; ?>
          <span class="caret"></span>
        </a>
        <ul class="dropdown-menu">
          <li><a href="/Profile">Profile</a></li>
          <li class="divider"></li>
          <li><a href="#" onClick="logOut();">Sign Out</a></li>
        </ul>
      </div>

Does anyone know of a way to make the links clickable from tablets?

Answer 1

This is a bug in Bootstrap that will hopefully be rectified in 2.1.2 - in the meantime, there are two popular issues (#2975 & #4550) on GitHub that contain temporary fixes.

This jQuery fix seems to work for most people and doesn't modify the Bootstrap source:

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