Liferay Dropdown Functionality isn't working properly
How To articles are not official guidelines or officially supported documentation. They are community-contributed content and may not always reflect the latest updates to Liferay DXP. We welcome your feedback to improve How To articles!
While we make every effort to ensure this Knowledge Base is accurate, it may not always reflect the most recent updates or official guidelines.We appreciate your understanding and encourage you to reach out with any feedback or concerns.
Legacy Article
You are viewing an article from our legacy "FastTrack"
publication program, made available for informational purposes. Articles
in this program were published without a requirement for independent
editing or verification and are provided"as is" without
guarantee.
Before using any information from this article, independently verify its
suitability for your situation and project.
Issue
- We've discovered an undesirable behavior when using the Liferay drop-down menu.
- Steps to reproduce:
- Content Page > Edit > Insert a "HTML" fragment and double click on the fragment
- Attach the following html markup within the HTML fragment editor
-
<div class="row">
<div class="col">
<button aria-expanded="false" aria-haspopup="true" class="mr-5 dropdown-toggle nav-link"
data-toggle="liferay-dropdown" id="t_dropdown_menu" type="button">
<span class="font-weight-bold ml-1">Menu 1</span>
</button>
<ul aria-labelledby="t_dropdown_menu" class="dropdown-menu right">
<li>
<a class="dropdown-item" href="javascript:void(0)">
My Learning
</a>
</li>
</ul>
</div>
<div class="col">
<button aria-expanded="false" aria-haspopup="true" class="dropdown-toggle nav-link"
data-toggle="liferay-dropdown" id="t_dropdown_menu" type="button">
<span class="font-weight-bold ml-1">Menu 2</span>
</button>
<ul aria-labelledby="t_dropdown_menu" class="dropdown-menu right">
<li>
<a class="dropdown-item" href="javascript:void(0)">
My Learning
</a>
</li>
</ul>
</div>
</div>
- Save > Publish > "Menu 1" and "Menu 2" should be visible
- Use the keyboard's "Tab" button to reach "Menu 1" > Hit "Enter" on the keyboard
- Use the keyboard's "Tab" button to reach "Menu 2" > Hit "Enter" to open dropdown
- Expected Result: "Menu 1"'s dropdown should close while "Menu 2"'s dropdown opens
- Actual Result: Both dropdowns are visible despite using the "Esc" key
Resolution
- This behavior has been identified and considered to be a bug. It is currently being addressed on LPD-55650.
- Please request a hotfix including LPD-55650 or upgrade to a version that contains the fix.
Did this article resolve your issue ?