touch device (e.g. iOS) dropdown backdrop is removed incorrectly
Created by: gwynjudd
This issue can be seen in this fiddle (http://jsfiddle.net/rfyt2fr3/1/) on an iOS touch device (probably other touch devices as well):
- click on the dropdown to show it
- verify using the web inspector that the dropdown backdrop has been added
- click anywhere in the page
- note that the dropdown backdrop is removed, but the dropdown didn't close due to the js event handler
On touch devices, the bootstrap plugin adds a dropdown:
https://github.com/twbs/bootstrap/blob/master/js/dropdown.js#L69
if ('ontouchstart' in document.documentElement && !$parent.closest('.navbar-nav').length) {
// if mobile we use a backdrop because click events don't delegate
$(document.createElement('div'))
.addClass('dropdown-backdrop')
.insertAfter($(this))
.on('click', clearMenus)
}
It's evident that this backdrop is meant to compensate for the known issue of click events not propagatingdelegating, otherwise the clearMenus
doesn't run when you click anywhere:
https://github.com/twbs/bootstrap/blob/master/js/dropdown.js#L158
$(document)
.on('click.bs.dropdown.data-api', clearMenus)
The code that removes the backdrop does so, even if the hide.bs.dropdown
event handler prevented the close.
https://github.com/twbs/bootstrap/blob/master/js/dropdown.js#L37
function clearMenus(e) {
if (e && e.which === 3) return
$(backdrop).remove()