Search code examples
angularangular-materialangular-cdk

mat-menu pierces through "cdk overlay fog"

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?

Solution

  • 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