0
0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-01 13:24:25 +01:00
Bootstrap/js
Patrick H. Lauke 6d64afe508 Replace dropdown backdrop hack with cleaner JS-only hack
* Replace backdrop with simple noop mouse listener

As discussed in https://github.com/twbs/bootstrap/pull/22422 the current
approach of injecting a backdrop (to work around iOS' broken event
delegation for the `click` event) has annoying consequences on
touch-enabled laptop/desktop devices.
Instead of a backdrop `<div>`, here we simply add extra empty/noop
mouse listeners to the immediate children of `<body>` (and remove
them when the dropdown is closed) in order to force iOS to properly
bubble a `click` resulting from a tap (essentially, method 2 from
https://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html)
This is sufficient (except in rare cases where the user does manage to tap
on the body itself, rather than any child elements of body - which is not
very likely in an iOS phone/tablet scenario for most layouts) to get iOS to
get a grip and do the correct event bubbling/delegation, meaning the regular
"click" event will bubble back to the `<body>` when tapping outside of the dropdown,
and the dropdown will close properly (just like it already does, even without
this fix, in non-iOS touchscreen devices/browsers, like Chrome/Android and
Windows on a touch laptop).
This approach, though a bit hacky, has no impact on the DOM structure, and
has no unforeseen side effects on touch-enabled laptops/desktops. And crucially,
it works just fine in iOS.

* Remove dropdown backdrop styles

* Update doc for dropdowns and touch-enabled devices
2017-04-14 09:19:00 +01:00
..
dist grunt 2017-04-08 13:22:53 -07:00
src Replace dropdown backdrop hack with cleaner JS-only hack 2017-04-14 09:19:00 +01:00
tests Merge branch 'v4-dev' into dropdown-keyboard 2017-04-12 10:36:14 -04:00
.eslintrc.json Update config files across the board. 2017-03-12 16:15:00 +11:00