Topic: dropdown in a table

ammi pro asked 1 year ago

I added action menu to a table. When I click on a toggle, dropdown opens as expected. However, it stays open until I click on the same toggle again. How can I close dropdown when cursor leaves open dropdown area? Any guidance will be really appreciated.
Thank you.


<div class="datatable datatable-sm mt-1" >
      class="table datatable-table table-hover"
      <tbody class="datatable-body">
        <tr *ngFor="let m of; let i = index" scope="row">
            <div mdbDropdown #dd class="dropdown" (click)="$event.stopPropagation()">


                <i class="fas fa-ellipsis-v silver-text"></i>
              <ul mdbDropdownMenu class="dropdown-menu" aria-labelledby="dropdownMenuButton-{{i}}">
                <li><a class="dropdown-item" href="javascript:void(0)" 
                  (click)="onActionClick1(m); $event.stopPropagation()">Action 1</a></li>
                <li><a class="dropdown-item" href="javascript:void(0)" 
                  (click)="onActionClick2(m); $event.stopPropagation()">Action 2</a></li>
                <li><hr class="dropdown-divider" /></li>
                <li><a class="dropdown-item" href="javascript:void(0)" 
                  (click)="onActionClick3(m); $event.stopPropagation()">Action 3</a></li>
    <mdb-table-pagination #paginationSearch></mdb-table-pagination>

Arkadiusz Idzikowski staff commented 1 year ago

Do you want to close the menu on mouseleave event or is there a bug where the menu does not close correctly when you click outside the menu area?

ammi pro commented 1 year ago

I want to close the menu on mouseleave event.

Please try to use this code:

  <div mdbDropdown class="dropdown" #dropdown>
      class="btn btn-primary dropdown-toggle"
      Dropdown button
    <ul mdbDropdownMenu class="dropdown-menu" aria-labelledby="dropdownMenuButton" (mouseleave)="dropdown.hide()">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>

In order to close the menu when mouse leave the trigger button (but not when it enters the dropdown menu), you would need to add another listener and this custom logic:

fromEvent(this.dropdownEl.nativeElement, 'mouseleave').subscribe((event: any) => {
  if (!event.relatedTarget.contains(this.dropdownMenu.nativeElement)) {

ammi pro commented 1 year ago

It is better, but not ideal. If mouse leaves row without entering open dropdown area, it stays open. if I put (mouseleave)="dropdown.hide()" on the button, it will close menu even if mouse enters dropdown area. Any idea how to close it if mouse leaves row, but keep it open if mouse enters open menu?

Arkadiusz Idzikowski staff commented 1 year ago

I'm afraid in this case it won't be that easy because you would need to add some custom logic in TS file to check if the mouse entered the dropdown menu. I added an example to my answer.

Please insert min. 20 characters.


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



Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: MDB5 3.0.0
  • Device: Desktop
  • Browser: Chrome
  • OS: W10
  • Provided sample code: No
  • Provided link: No