mat-menu pierces through "cdk overlay fog"

Question

This STACKBLITZ (SB) shows the problem.

CSS class .WHYYYYY shows the "two" problems I'm facing.

1. in order for the mat-menu to open on hover I need to set z-index:1050; (ref 2 hacky workaround) on the menu buttons.
2. this creates a problem with the "dialog fog". (click on the button -> SB)
3. I found out the overlay has a default "z-index of 1000"

Seems I have two ways of solving this.

1. give the fog a higher z-index (hack the hack)
2. (desired solution) make the hover menu work with normal z-index.
   • I don't understand why I need z-index:1050;. It seems that when the mat-menu opens it spikes "z index-wise" very high for a moment, so that I trigger the button (mouseleave) event (that will in fact close its mat-menu again).

Is this a bug? Can I prevent this piercing/spiking of the created mat-menu? How Can I have a working hover menu disabled under the fog?

Solangesolano

Answer 1

When material cdk opens menu it creates cdk-overlay-container with backdrop area that fills all the browser window.

body
  your app elements

  div.cdk-overlay-container   - z-index = 1000
    div.cdk-overlay-backdrop

Once you trigger mouseenter event that backdrop overlaps your buttons and they gets mouseleave event immediately.

That's why setting z-index on buttons more then 1000 make it working.

But as you can guess you can simply throw away that backdrop:

sub-menu.component.html

<mat-menu ... [hasBackdrop]="false">

and you don't need any kind of workarounds with z-index.

Forked Stackblitz

Pontus

This works! Should definitely link this to the hack workaround! – Foushee

No need to add brackets: hasBackdrop="false". – Georgia

@Pontus This is great, thanks! However, in the Forked Stackblitz, there is a "resetFocus" function in the template that is not implemented in the typescript (so results in an error). How should I implement the resetFocus function? thanks! – Pertinacious

@Pontus Actually, I figured it out. I changed it to pass in the button rather than the menu and added the following code: resetFocus(button) { button['_elementRef'].nativeElement.blur(); } – Pertinacious

Answer 2

2 options resolve you problem:

@Input()
backdropClass: string

@Input()
hasBackdrop: boolean | undefined

Tilney