Modal, Dropdown does not work properly on mobile devices

[sam6230i]

Modal and Dropdown opens up without any error but the elements inside it are not actionable on mobile devices. I mean in case of Dropdown clicking on options, Dropdown disappears but the action is not getting performed. And in case of Modal its not allowing me to click on the elements inside it. Basically Dropdown and Modal both are completely unusable on mobile device (on web it works well). Even Modal and Dropdown inside Bootstrap main site also does not work for me. I am testing on default browser for android

[wyred]

Same problem on iOS's Safari browser on iPhone and iPad. Dropdown menu opens fine but cannot be tapped on.
I believe it used to work fine until recent updates (possibly 2.1.0)

[sam6230i]

I am facing this problem with their recent release 2.1.1 too

[thezoggy]

but what about 2.1.2 ?

[blakeembrey]

Easily fixed by adding:

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

This fix is incorporated into #5067 - basically stops the touch event on a dropdown from bubbling to the next element, which would be the HTML tag and has the clearMenus function.

[blakeembrey]

Could also do a check inside the clearMenus function. Something like?

function clearMenus(e) {
  if (e && typof e === 'object' && e.type === 'touchstart') {
    if ($(this).closest('.dropdown-menu').length) { return; }
  }
  ...
}

However, this would be more expensive and only result in the advantage of being able to bind dropdown menu touch events to the html tag.

P.S. This code snippet is untested but should work fine.

[giolvani]

The suggest of @blakeembrey solve my problem about Dropdown...

Thanks

[tofumedia]

Thanks @blakeembrey my dropdown menu items are clickable on the iphone now

[mdo]

Closing this as a dupe of #5094, which also reports the same dropdown issues. Hoping to have a fix in 2.2.2-wip.

[pseps]

@blakeembrey, thanks for the fix. Sorry for the newbie question, but where do you add it?

[blakeembrey]

@pseps Both the snippets I posted modify the bootstrap-dropdown.js file.

[pseps]

@blakeembrey Thanks!

[atherdon]

@blakeembrey Thanks!

[jasonhoi]

@blakeembrey Yo!!! You are my friend saving me a day of life!

[ds125v]

Am I being dense or was this bug closed as a duplicate of itself? Was it a typo and there's another bug out there that I should be following for a fix to this?

[duvtedudug]

Sorry how exactly do I incorporate blakeembrey's fix? I'm a numbskull.