Topic: MDB Bootstrap 5 Angular Dropdown not closing after selecting item
Expected behavior*_The Dropdown menu should close after selecting an item_*Actual behavior*_Dropdown menu is not closing after selecting an item. have to click again outside to close it._*Resources (screenshots, code snippets etc.)
Followed MDB5-Angular-UI-KIt-Free-1.0.0 installation and simply copy the dropdown first example:
code snippet: https://mdbootstrap.com/snippets/standard/vxtredge/3273762
https://mdbootstrap.com/docs/b5/angular/components/dropdowns/#docsTabsOverview
We will take a closer look at this problem, please try to use hide() method on dropdown item click event as a workaround for now:
<div mdbDropdown class="dropdown" #dropdown>
<button
class="btn btn-primary dropdown-toggle"
type="button"
id="dropdownMenuButton"
aria-expanded="false"
mdbDropdownToggle
>
Dropdown button
</button>
<ul
mdbDropdownMenu
class="dropdown-menu"
aria-labelledby="dropdownMenuButton"
>
<li><a class="dropdown-item" href="#" (click)="dropdown.hide()">Action</a></li>
<li><a class="dropdown-item" href="#" (click)="dropdown.hide()">Another action</a></li>
<li><a class="dropdown-item" href="#" (click)="dropdown.hide()">Something else here</a></li>
</ul>
</div>
VxTredge commented 3 years ago
please add this example on https://mdbootstrap.com/docs/b5/angular/components/dropdowns/#docsTabsAPIthe wrong example with code was given in the link
Thank you for the workaround.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB Angular
- MDB Version: MDB5 1.0.0
- Device: PC
- Browser: CHROME Version 92.0.4515.159 (Of
- OS: Windows 10
- Provided sample code: No
- Provided link: Yes