mat-menu проникает сквозь "cdk overlay fog"

Question

Это STACKBLITZ (SB) показывает проблему.

Класс CSS .WHYYYYY показывает "две" проблемы, с которыми я сталкиваюсь.

1. inДля того, чтобы мат-меню открывалось при наведении, мне нужно установить z-index:1050; ( ref 2 hacky обходной путь ) для кнопок меню.
2. это создает проблему с «диалоговым туманом»,(нажмите на кнопку -> SB)
3. Я обнаружил, что наложение имеет по умолчанию "z-index of 1000"

Кажется, у меня есть два пути решения этой проблемы.

1. придает туману более высокий z-индекс (взломать хак)
2. (желаемое решение) заставляет меню наведения работать с обычным z-индексом.
   • Я не понимаю, зачем мне нужно z-index:1050;.Похоже, что когда открывается меню mat, оно на мгновение резко поднимает "z index-wise", так что я запускаю событие button (mouseleave) (которое фактически снова закрывает его меню mat).

Это ошибка?Могу ли я предотвратить этот пирсинг / всплеск созданного мат-меню?Как можно отключить рабочее меню при наведении в тумане?

Answer 1

Когда CDD материала открывает меню, оно создает cdk-overlay-container с фоновой областью, которая заполняет все окно браузера.

body
  your app elements

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

После запускаmouseenter событие, которое на заднем плане перекрывает ваши кнопки, и они сразу же получают событие mouseleave.

Вот почему настройка z-index на кнопки больше 1000 делает его работающим.

Но, как вы можете догадатьсявы можете просто выбросить это backdrop:

sub-menu.component.html

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

, и вам не нужны никакие обходные пути с z-индекс.

Разветвленный стек-блиц