How to open and close Angular mat menu on hover

B

16

48

This question is in reference to this Github issue, with mat-menu which can't be toggled using mouse hover, I am basically trying to replace a bootstrap based horizontal navigation menu with angular material's menu. The only thing keeping me from replicating bootstrap based menu is opening and closing mat-menu on hover. As mentioned in the above Github issue there are some workarounds to achieve what I want, like using, mouseEnter

(mouseenter)="menuTrigger.openMenu()"

or adding a span inside Mat-menu in order to bind mat-menu close,

<mat-menu #menu="matMenu" overlapTrigger="false">
  <span (mouseleave)="menuTrigger.closeMenu()">
    <button mat-menu-item>Item 1</button>
    <button mat-menu-item>Item 2</button>
  </span>
</mat-menu>

but none of the solutions seems to cover every little scenario,

e.g.

As mentioned in the above Github issue, there are following issues in the first SO solution.

Hover the mouse cursor on the button and the menu will pop up. But if you click on the button, it will hide and show the menu. IMHO it's a bug.

To hide the menu, the user needs to click outside of the menu. Ideally, the menu would become hidden if the mouse cursor is outside
of the area (which includes the button, the menu, and sub-menus)
longer than 400ms.

And in the span solution which tries to solve one of the above issues, but doesn't work properly, e.g.

hovering over MatMenuTrigger does open the mat-menu as expected but if a user moves the mouse away without entering mat-menu, then it doesn't close automatically which is wrong.

Also moving to one of the levels two sub-menu also closes the level one menu which is not what I want,

P.S moving mouse from one opened menu to the next sibling one doesn't open the next one. I guess this might be difficult to achieve as mentioned here, But I think some of these might be achievable right?

Here is a basic stackBlitz which reproduces what I am experiencing, any help is appreciated.

Bathyscaphe answered 4/12, 2018 at 17:19 Comment(2)

mat menu sucks at this! – Blackfish 11/1, 2019 at 6:11

evidence of incapacity for a menu at all :/ – Otter 5/7, 2019 at 9:23

H

38

The first challenge is that mat-menu steals the focus from the button when the CDK overlay is generated due to the z-index of the overlay... to solve this you need to set the z-index in a style for the button...

This will stop the recursive loop when you add a (mouseleave) to the button. style="z-index:1050"

Next you need to track the state of all enter and leave events for the levelone and levelTwo menu's and store that state in two component variables.

enteredButton = false;
isMatMenuOpen = false;
isMatMenu2Open = false;

Next create menu enter and menuLeave methods for both menu levels.. notice menuLeave(trigger) checks if level2 is accessed and does nothing if true.

Please Note: menu2Leave() has logic to allow navigation back to level one but close both if exit the other side... also removing button focus upon leave of levels.

menuenter() {
    this.isMatMenuOpen = true;
    if (this.isMatMenu2Open) {
      this.isMatMenu2Open = false;
    }
  }

  menuLeave(trigger, button) {
    setTimeout(() => {
      if (!this.isMatMenu2Open && !this.enteredButton) {
        this.isMatMenuOpen = false;
        trigger.closeMenu();
        this.ren.removeClass(button['_elementRef'].nativeElement, 'cdk-focused');
        this.ren.removeClass(button['_elementRef'].nativeElement, 'cdk-program-focused');
      } else {
        this.isMatMenuOpen = false;
      }
    }, 80)
  }

  menu2enter() {
    this.isMatMenu2Open = true;
  }

  menu2Leave(trigger1, trigger2, button) {
    setTimeout(() => {
      if (this.isMatMenu2Open) {
        trigger1.closeMenu();
        this.isMatMenuOpen = false;
        this.isMatMenu2Open = false;
        this.enteredButton = false;
        this.ren.removeClass(button['_elementRef'].nativeElement, 'cdk-focused');
        this.ren.removeClass(button['_elementRef'].nativeElement, 'cdk-program-focused');
      } else {
        this.isMatMenu2Open = false;
        trigger2.closeMenu();
      }
    }, 100)
  }

  buttonEnter(trigger) {
    setTimeout(() => {
      if(this.prevButtonTrigger && this.prevButtonTrigger != trigger){
        this.prevButtonTrigger.closeMenu();
        this.prevButtonTrigger = trigger;
        trigger.openMenu();
      }
      else if (!this.isMatMenuOpen) {
        this.enteredButton = true;
        this.prevButtonTrigger = trigger
        trigger.openMenu()
      }
      else {
        this.enteredButton = true;
        this.prevButtonTrigger = trigger
      }
    })
  }

  buttonLeave(trigger, button) {
    setTimeout(() => {
      if (this.enteredButton && !this.isMatMenuOpen) {
        trigger.closeMenu();
        this.ren.removeClass(button['_elementRef'].nativeElement, 'cdk-focused');
        this.ren.removeClass(button['_elementRef'].nativeElement, 'cdk-program-focused');
      } if (!this.isMatMenuOpen) {
        trigger.closeMenu();
        this.ren.removeClass(button['_elementRef'].nativeElement, 'cdk-focused');
        this.ren.removeClass(button['_elementRef'].nativeElement, 'cdk-program-focused');
      } else {
        this.enteredButton = false;
      }
    }, 100)
  }

HTML

below is how to wire it all up.

<ng-container *ngFor="let menuItem of modulesList">

    <ng-container *ngIf="!menuItem.children">
        <a class="nav-link">
            <span class="icon fa" [ngClass]="menuItem.icon"></span>
      <span class="text-holder">{{menuItem.label}}</span>
    </a>
  </ng-container>
  <ng-container *ngIf="menuItem.children.length > 0">
    <button #button mat-button [matMenuTriggerFor]="levelOne" #levelOneTrigger="matMenuTrigger" (mouseenter)="levelOneTrigger.openMenu()" (mouseleave)="buttonLeave(levelOneTrigger, button)" style="z-index:1050">
      <span class="icon fa" [ngClass]="menuItem.icon"></span>
      <span>{{menuItem.label}}
        <i class="fa fa-chevron-down"></i>
      </span>
    </button>

    <mat-menu #levelOne="matMenu" direction="down" yPosition="below">
      <span (mouseenter)="menuenter()" (mouseleave)="menuLeave(levelOneTrigger, button)">
      <ng-container *ngFor="let childL1 of menuItem.children">
        <li class="p-0" *ngIf="!childL1.children" mat-menu-item>
          <a class="nav-link">{{childL1.label}}
            <i *ngIf="childL1.icon" [ngClass]="childL1.icon"></i>
          </a>
        </li>
        <ng-container *ngIf="childL1.children && childL1.children.length > 0">
          <li mat-menu-item #levelTwoTrigger="matMenuTrigger" [matMenuTriggerFor]="levelTwo">
            <span class="icon fa" [ngClass]="childL1.icon"></span>
            <span>{{childL1.label}}</span>
          </li>

          <mat-menu #levelTwo="matMenu">
            <span (mouseenter)="menu2enter()" (mouseleave)="menu2Leave(levelOneTrigger,levelTwoTrigger, button)">
            <ng-container *ngFor="let childL2 of childL1.children">
              <li class="p-0" mat-menu-item>
                <a class="nav-link">{{childL2.label}}
                  <i *ngIf="childL2.icon" [ngClass]="childL2.icon"></i>
                </a>
              </li>
            </ng-container>
            </span>
          </mat-menu>
        </ng-container>
      </ng-container>
      </span>
    </mat-menu>
  </ng-container>

</ng-container>

Stackblitz

https://stackblitz.com/edit/mat-nested-menu-yclrmd?embed=1&file=app/nested-menu-example.html

Hopple answered 4/12, 2018 at 18:3 Comment(18)

Thanks @Hopple this seems to solve most of the issues I was facing. The only thing annoying is some minor issues while transition of mouse between trigger and mat-menu, but i guess i can live with that. – Bathyscaphe 5/12, 2018 at 6:2

I just updated the stackblitz link by increasing the setTimeout to 100ms on buttonLeave... this should allow more time for the enter menu variable to be set on the transition between trigger and mat-menu – Hopple 5/12, 2018 at 6:29

I also added button state, that should address all remaining minor issues. Any items beyond that, please note the solution is fully customizable, you will need to make adjustments to the timing etc to make the solution efficient in your application. – Hopple 5/12, 2018 at 7:17

A bug with clicking on the menu (essential for the touch screens) - on the 1st click the menu opens and collapses straight away, on the 2nd - it stays open. – Moneywort 6/12, 2018 at 0:44

@AlexKlaus this has bee resolved, please see revised stackblitz – Hopple 6/12, 2018 at 14:4

Confirm, that touch screens are good now. Only see two minor issues: 1) On clicking the menu again it gets hidden (see gph.is/2SBxCnL); 2) Clicking on the menu for the 3rd-4th time it may appear and disappear in a second. – Moneywort 6/12, 2018 at 23:25

@AlexKlaus that is interesting, managed to get it to replicate once in the chrome dev tools mobile emulation... but tough to do it again, I really had to spam it the first time and think I had to access level 2 once to do it. The only thing I can think of is maybe the level 2 state is not getting reset properly after accessing level 2 and going back to button... so I went ahead and made sure those are set to false under the one if condition in the buttonEnter that would apply... unfortunately can't reliably replicate to go any further than to take a guess at this issue. – Hopple 6/12, 2018 at 23:56

@Hopple can you share how exactly you fixed the first bug reported by Alex? I think I have the same setup, but It is appearing at my end but not in the above stackblitz. "A bug with clicking on the menu (essential for the touch screens) - on the 1st click the menu opens and collapses straight away, on the 2nd - it stays open" – Bathyscaphe 10/12, 2018 at 9:54

I lengthened the setTimout duration to allow time for the state variables to be set, but I also included the enteredButton variable to track the button states. – Hopple 10/12, 2018 at 15:16

@Hopple I guess I have the same configurations at my end, but I'll check again or provide an updated stackBlitz, thanks. – Bathyscaphe 11/12, 2018 at 16:35

@SaifUllah check your version of buttonEnter() and make sure it matches the three conditions if, else if, else. Just noticed I also started passing a copy of the trigger to store in a local variable for comparison as well, this was to address when hovering over a new button while prior button menu was open it will close prior menu before opening new menu. – Hopple 11/12, 2018 at 17:3

This is working fine in my chrome but not safari (if you move the mouse down to item 2 in the submenu the whole thing closes prematurely). – Madalene 13/1, 2019 at 17:27

dynamic-nested-menus.stackblitz.io Can you make this with on hover? – Caplan 29/8, 2019 at 13:53

On menu scrollbar it doesn't work. IS there any way to include scrollbar ? – Caplan 1/9, 2019 at 17:42

Just FYI - there's a perfect solution regarding avoiding that z-index: 1050 - https://mcmap.net/q/357065/-mat-menu-pierces-through-quot-cdk-overlay-fog-quot. – Leibowitz 25/9, 2019 at 2:39

I noticed a minor issue in your example. When you hover over User, User 1 is highlighted. As you move over the other users, User 1 unhighlights and each other user highlights. When you hover over Admin, Admin 1 is highlighted. As you move over the other admins, each other admin highlights, but Admin 1 remains highlighted. I assume this functionality wasn't intentional? Any idea as to why this happens, because I am facing a similar issue? – Indetermination 4/12, 2019 at 17:0

@Indetermination there are issues on github discussing this for the material library. https://github.com/angular/material/issues/3707 I revised the stackblitz to use the renderer and remove the focus class of the first element on menu open. – Hopple 4/12, 2019 at 21:25

This works well in browsers like Chrome, but in Safari the menu closes immediately when hovering over an item in the menu. Is there a fix for this? – Meanie 22/4, 2020 at 13:13

P

49

here a component I wrote for handling auto open/close mat-menu:

import { Component } from '@angular/core';

@Component({
  selector: 'app-auto-open-menu',
  template: `
  <div class="app-nav-item" [matMenuTriggerFor]="menu" #menuTrigger="matMenuTrigger"
                  (mouseenter)="mouseEnter(menuTrigger)" (mouseleave)="mouseLeave(menuTrigger)">
      <ng-content select="[trigger]"></ng-content>
  </div>
  <mat-menu #menu="matMenu" [hasBackdrop]="false">
      <div (mouseenter)="mouseEnter(menuTrigger)" (mouseleave)="mouseLeave(menuTrigger)">
          <ng-content select="[content]"></ng-content>
      </div>
  </mat-menu>
  `
})
export class AutoOpenMenuComponent {
  timedOutCloser;

  constructor() { }

  mouseEnter(trigger) {
    if (this.timedOutCloser) {
      clearTimeout(this.timedOutCloser);
    }
    trigger.openMenu();
  }

  mouseLeave(trigger) {
    this.timedOutCloser = setTimeout(() => {
      trigger.closeMenu();
    }, 50);
  }
}

Then you can use it in your app:

<app-auto-open-menu>
          <div trigger>Auto-open</div>
          <div content>
            <span mat-menu-item>Foo</span>
            <span mat-menu-item>Bar</span>
          </div>
</app-auto-open-menu>

Prouty answered 3/1, 2020 at 10:23 Comment(11)

This should be the selected answer, no CSS and a simple complete solution :) – Muffle 3/3, 2020 at 12:54

This is 100 times better than any answer here. It uses native material API. Works very well. A few minor tweaks needed. mat-menu has 8px padding top and bottom which when hovered causes close to fire when it should not. To remove this padding add this to styles.css / styles.scss : div.cdk-overlay-container .mat-menu-content { padding-top: 0; padding-bottom: 0; } ... also <div class="app-nav-item" ...> should be <span class="app-nav-item" ...> to get rid of an unwanted block element – Confine 22/5, 2021 at 22:32

note if you want the top and bottom padding (removed in advice on previous comment) then you can add it to you <div content> ... just add a class to this div and style it as usual - this will not cause a problem - you may also want to pass additional props like this <app-auto-open-menu xPosition="before" yPosition="below"> which requires you to add an @Input for each in the usual manner – Confine 22/5, 2021 at 22:49

Upvoted but this doesn't work on mobile unless you add something like <div trigger><div (click)="$event.stopPropagation();">Auto-open</div></div> – Yet 15/10, 2021 at 13:28

Works perfectly, but the first item always stays highlighted until I click somewhere. Any tips on how to fix this ? – Helfand 23/1, 2022 at 18:43

@TomasLukac I am also facing same issue. You got a solution for first item always getting highlighted ? – Pham 14/6, 2022 at 12:1

a work around for MOBILE view you can copy paste the same code without any mouseenter or mouseleave functions and give different ids to mat-menu. Then using css @media hide it in desktop view and hide the actual code in mobile view. – Juni 10/8, 2022 at 22:3

I completely agree with @danday74's comment! This solution is truly fantastic and surpasses all other answers here. It cleverly utilizes the native Material API, resulting in a seamless and high-performing hover menu feature. I did make some minor adjustments to address specific requirements. Just know that with a few tweaks, this solution worked flawlessly for my use case. – Brutus 8/6, 2023 at 4:23

Perfect! This is exactly what I needed. Take my upvote :D – Baryton 16/6, 2023 at 17:56

Wow! This should definitely be the selected answer. Thank you! – Gaur 21/9, 2023 at 17:42

It's important to mention that menu item focus isn't working when using content projection, so the solution with "mat-menu-item" elements outside "mat-menu" can break accessibility. Source – Brittni 16/2 at 11:15

H

38