dropdown in a table

Topic: dropdown in a table

ammi pro asked 2 years 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 years 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 years ago

I want to close the menu on mouseleave event.

Add comment

Arkadiusz Idzikowski staff answered 2 years ago

0 0 Best answer

<p>Please try to use this code:</p>

<pre class="prettyprint"><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>
</code></pre>

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

<pre class="prettyprint"><code>fromEvent(this.dropdownEl.nativeElement, 'mouseleave').subscribe((event: any) => {
  if (!event.relatedTarget.contains(this.dropdownMenu.nativeElement)) {
    this.dropdown.hide();
  }
});
</code></pre>

Please insert min. 20 characters.

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 years 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 years 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.

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

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

ammi

Pro User 94Support score
35Questions 6Answers 0Snippets