Reword "mobile" to "touch-enabled"

...as touch is not exclusive to "mobile" anymore nowadays. also explicitly clarifies this is a fix for iOS, and that it impacts touch laptops etc as well. lastly, renames the variable from "dropdown" to "backdrop" for clarity/consistency

diff --git a/docs/components/dropdowns.md b/docs/components/dropdowns.md
index 3c68f9453416a3743faf9c38d978a894c5814181..bb54c040e958fcc043c1485b919de33e38074d58 100644 (file)
--- 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 644273a0a73a44a6d42b09d950943b0d44fcb38d..96b7c87734783dea71a2c8fc67a9d6a9e9527f1e 100644 (file)
--- a/js/src/dropdown.js
+++ b/js/src/dropdown.js
@@ -112,11 +112,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()