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
learn-legacy-article-disclaimer-text
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