Overlays (Dropdowns, etc) Don't Close on Lost Focus on iOS

Created by: rizqidjamaluddin

On iOS (not sure about other mobile platforms), overlays don't exhibit their expected behavior when they lose focus (i.e. clicking elsewhere on the page).

For all kinds of dropdowns, the only way to close the dropdown menu is by clicking again on the element that triggers it, or clicking on some other anchor element. The expected behavior is to close when they lose focus, so clicking anywhere on the page should close them.

Popvers and tooltips behave similarly, except the only way to close them is to click on another anchor element. This is far worse than the issue with dropdowns, as users have no way to close the overlay without activating some other function on the page. Even clicking on the trigger element does nothing.

This issue can easily block page content with no clear/easy solution for users.

I would imagine, after digging through the javascript, that this has to do with how jQuery detects click events on iOS. It only triggers the event on anchor elements. For example, on this jsfiddle, the event only triggers when you click on the anchor, regardless of what is bound to the event.

Could someone also verify this on an Android device?