Topic: dropdown in a table

ammi pro asked 2 weeks 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.

HTML

<div class="datatable datatable-sm mt-1" >
    <table
      class="table datatable-table table-hover"
      mdbTable
      mdbTableSort
      #table="mdbTable"
      #sortSearch="mdbTableSort"
      [dataSource]="documents"
      [sort]="sortSearch"
      [pagination]="paginationSearch"
    >
      <tbody class="datatable-body">
        <tr *ngFor="let m of table.data; let i = index" scope="row">
          <td>
            {{m.name}}
          </td>
          <td>
            <div mdbDropdown #dd class="dropdown" (click)="$event.stopPropagation()">
              <a

                id="dropdownMenuButton-{{i}}"
                aria-expanded="false"
                mdbDropdownToggle

              >
                <i class="fas fa-ellipsis-v silver-text"></i>
              </a>
              <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>
              </ul>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
    <mdb-table-pagination #paginationSearch></mdb-table-pagination>
</div>

Arkadiusz Idzikowski staff commented 2 weeks 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 2 weeks ago

I want to close the menu on mouseleave event.


Arkadiusz Idzikowski staff answered 2 weeks ago


Please try to use this code:

  <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" (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>
    </ul>
  </div>

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)) {
    this.dropdown.hide();
  }
});

ammi pro commented 2 weeks 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 2 days 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.

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: 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