Topic: MDB Bootstrap 5 Angular Dropdown not closing after selecting item

VxTredge free asked 1 year ago


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 free commented 1 year 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.



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • 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