4

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?

Andre Elrico
  • 10,956
  • 6
  • 50
  • 69

1 Answers1

12

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

enter image description here

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

yurzui
  • 205,937
  • 32
  • 433
  • 399
  • This works! Should definitely link this to the hack workaround! – lyslim Sep 25 '19 at 02:37
  • No need to add brackets: hasBackdrop="false". – SoEzPz Jan 13 '22 at 16:04
  • @yurzui 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! – David Dec 21 '22 at 18:26
  • @yurzui 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(); } – David Dec 21 '22 at 18:32