From f3d0fee91ec30aa6cde08de821b06fd6f337a3a3 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 3 Jan 2017 19:24:24 -0800 Subject: fixes #21454 by revamping some docs styles for dropdowns --- docs/components/dropdowns.md | 60 +++++++++++++++++++++----------------------- 1 file changed, 29 insertions(+), 31 deletions(-) (limited to 'docs/components/dropdowns.md') diff --git a/docs/components/dropdowns.md b/docs/components/dropdowns.md index d26de6eef..3c68f9453 100644 --- a/docs/components/dropdowns.md +++ b/docs/components/dropdowns.md @@ -21,7 +21,7 @@ Wrap the dropdown's toggle (your button or link) and the dropdown menu within `. Any single `.btn` can be turned into a dropdown toggle with some markup changes. Here's how you can put them to work with either ` @@ -252,7 +252,7 @@ Button dropdowns work with buttons of all sizes, including default and split dro Separated link -
+
-
+
-
- Action - Another action - Something else here -
- Separated link -
+
+ +
+ Action + Another action + Something else here +
+ Separated link
+
-
- - -
- Action - Another action - Something else here -
- Separated link -
+
+ + +
+ Action + Another action + Something else here +
+ Separated link
@@ -407,7 +405,7 @@ Trigger dropdown menus above elements by adding `.dropup` to the parent element. Historically dropdown menu contents *had* to be links, but that's no longer the case with v4. Now you can optionally use ` @@ -510,7 +508,7 @@ $('.dropdown-toggle').dropdown() {% endhighlight %} {% callout info %} -#### `data-toggle="dropdown"` still required +##### `data-toggle="dropdown"` still required Regardless of whether you call your dropdown via JavaScript or instead use the data-api, `data-toggle="dropdown"` is always required to be present on the dropdown's trigger element. {% endcallout %} -- cgit v1.2.3 From 3275ca4b30383390d3475beb8c4f43343ab31f5c Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Wed, 12 Apr 2017 13:54:16 +0100 Subject: 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 --- docs/components/dropdowns.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/components/dropdowns.md') 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. -- cgit v1.2.3 From 6d64afe508bfd0bcfb5831a9a4708cef4ad88334 Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Fri, 14 Apr 2017 09:19:00 +0100 Subject: 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 `
`, here we simply add extra empty/noop mouse listeners to the immediate children of `` (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 `` 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 --- docs/components/dropdowns.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) (limited to 'docs/components/dropdowns.md') diff --git a/docs/components/dropdowns.md b/docs/components/dropdowns.md index bb54c040e..0be8d4d74 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 `` 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. -- cgit v1.2.3 From 9a3e002e8f92b09d027083d3fc74750d6e56ef6e Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Tue, 18 Apr 2017 09:34:55 +0100 Subject: Add dropdown menu accessibility callout and fix example As the question often comes up about why Bootstrap does not do "true" ARIA menus (with their `role="menu"` etc), add an admittedly lengthy note (tl;dr because BS is generic, and ARIA menus are specific and quite limiting). Additionally, fixes up the `` example for dropdown trigger, with the missing `role="button"` and neutering the `href` (which would be useless anyway since BS overrides the link-like nature of the `` so it could never be triggered/followed anyway) --- docs/components/dropdowns.md | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) (limited to 'docs/components/dropdowns.md') diff --git a/docs/components/dropdowns.md b/docs/components/dropdowns.md index 0be8d4d74..4da232b7d 100644 --- a/docs/components/dropdowns.md +++ b/docs/components/dropdowns.md @@ -16,6 +16,16 @@ Dropdowns are toggleable, contextual overlays for displaying lists of links and Wrap the dropdown's toggle (your button or link) and the dropdown menu within `.dropdown`, or another element that declares `position: relative;`. Dropdowns can be triggered from `` or `