Drop-down Menu Submenu Items Cannot be Selected on Mobile

• Type: Bug
• Status: Closed
• Resolution: Fixed
• Affects Version/s: 7.0.X EE, Master
• Fix Version/s: 7.0.0 DXP FP26, 7.0.X EE, 7.0.4 CE GA5, 7.1.X, Master
• Component/s: ~ [Archived] Frontend Infrastructure
• Labels:
  • ee-ts
  • liferay-digital-enterprise-70-sp5
  • liferay-fixpack-de-26-7010
• Branch Version/s:
  7.0.x
• Backported to Branch:
  Committed
• Fix Priority: 3
• Git Pull Request: https://github.com/brianchandotcom/liferay-portal/pull/50497

On a mobile device, the Lexicon Management Bar's drop-down menus close before the touch or click event is fired and you are unable to click into the drop-down menus. This is seemingly due to the implementation of dropdown-backdrop in bootstrap.

Steps to Reproduce:

1. Go to Site Administration>Content>Web Content and add a basic web content article.
2. Open the Developer Tools and select Toggle Device Bar to simulate mobile, shrink the window size to be the size of mobile, or access the page from a mobile device.
3. Try to filter the article. Click the Filter/Order drop-down menu, select Status: Any drop-down and try to change to a new status.

Result: Menu closes and you are unable to select a new status.

This is also reproducible when trying to click on All drop-down and Order by drop-down menus.
The web content article filters appears to be using the same Management Bar element as demonstrated on http://liferay.github.io/clay/content/management-bar/.

Results of Testing:
Expected Results: Able to click onto Management Bar drop-down menus.
Actual Results: Unable to click onto Management Bar drop-down menus.