diff options
| author | Patrick H. Lauke <redux@splintered.co.uk> | 2017-04-14 11:19:00 +0300 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2017-04-14 11:19:00 +0300 |
| commit | 6d64afe508bfd0bcfb5831a9a4708cef4ad88334 (patch) | |
| tree | e42caa655ffa11b5ea8d4dc50340682628a9fd46 /docs | |
| parent | 3b3366e1b6ab30acd8cb468fb6570cca1b38f01e (diff) | |
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
Diffstat (limited to 'docs')
| -rw-r--r-- | docs/components/dropdowns.md | 4 |
1 files changed, 3 insertions, 1 deletions
diff --git a/docs/components/dropdowns.md b/docs/components/dropdowns.md index bb54c040e9..0be8d4d74c 100644 --- a/docs/components/dropdowns.md +++ b/docs/components/dropdowns.md @@ -480,7 +480,9 @@ Add `.disabled` to items in the dropdown to **style them as disabled**. Via data attributes or JavaScript, the dropdown plugin toggles hidden content (dropdown menus) by toggling the `.show` class on the parent list item. -On touch-enabled devices, opening a dropdown adds a `.dropdown-backdrop` as a tap area for closing dropdown menus when tapping outside the menu, to work around a quirk in iOS' event delegation. **This means that once a dropdown menu is open, any tap or click (including with a mouse, on a multi-input device such as a laptop with a touchscreen) outside of the menu will be intercepted to close the menu. Opening another dropdown menu, or activating any other control or link, will therefore require an extra tap or click.** +{% callout info %} +On touch-enabled devices, opening a dropdown adds empty (`$.noop`) `mouseover` handlers to the immediate children of the `<body>` element. This admittedly ugly hack is necessary to work around a [quirk in iOS' event delegation](https://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html), which would otherwise prevent a tap anywhere outside of the dropdown from triggering the code that closes the dropdown. Once the dropdown is closed, these additional empty `mouseover` handlers are removed. +{% endcallout %} Note: The `data-toggle="dropdown"` attribute is relied on for closing dropdown menus at an application level, so it's a good idea to always use it. |