diff options
| author | Pierre Vanduynslager <[email protected]> | 2017-04-12 16:31:50 -0400 |
|---|---|---|
| committer | GitHub <[email protected]> | 2017-04-12 16:31:50 -0400 |
| commit | 2f9416627648aee10347f141c0ae6ff02b76f7ef (patch) | |
| tree | 66187b78317bf125fbb1977ce83cb5080e40854a | |
| parent | 208e0384dfcf879e466ed5f97f355be9677c75ec (diff) | |
| parent | 1f80f61677da40944f5af043722aedeebd3b71c3 (diff) | |
| download | bootstrap-2f9416627648aee10347f141c0ae6ff02b76f7ef.tar.xz bootstrap-2f9416627648aee10347f141c0ae6ff02b76f7ef.zip | |
Merge branch 'v4-dev' into dropdown-keyboard
| -rw-r--r-- | docs/components/dropdowns.md | 2 | ||||
| -rw-r--r-- | js/src/dropdown.js | 11 |
2 files changed, 7 insertions, 6 deletions
diff --git a/docs/components/dropdowns.md b/docs/components/dropdowns.md index 3c68f9453..bb54c040e 100644 --- a/docs/components/dropdowns.md +++ b/docs/components/dropdowns.md @@ -480,7 +480,7 @@ 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 mobile devices, opening a dropdown adds a `.dropdown-backdrop` as a tap area for closing dropdown menus when tapping outside the menu, a requirement for proper iOS support. **This means that switching from an open dropdown menu to a different dropdown menu requires an extra tap on mobile.** +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.** 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. diff --git a/js/src/dropdown.js b/js/src/dropdown.js index fc2908e7d..b616186f3 100644 --- a/js/src/dropdown.js +++ b/js/src/dropdown.js @@ -111,11 +111,12 @@ const Dropdown = (($) => { if ('ontouchstart' in document.documentElement && !$(parent).closest(Selector.NAVBAR_NAV).length) { - // if mobile we use a backdrop because click events don't delegate - const dropdown = document.createElement('div') - dropdown.className = ClassName.BACKDROP - $(dropdown).insertBefore(this) - $(dropdown).on('click', Dropdown._clearMenus) + // if touch-enabled device we use a backdrop because click events + // don't delegate on iOS - see https://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html + const backdrop = document.createElement('div') + backdrop.className = ClassName.BACKDROP + $(backdrop).insertBefore(this) + $(backdrop).on('click', Dropdown._clearMenus) } this.focus() |