Nested mat-menu (sub-item) disappeared.

[irowbin]

Bug, feature request, or proposal:

bug

What is the expected behavior?

Submenu of mat-menu should not hide when moving mouse over it.

What is the current behavior?

When moving mouse over sub menu, it disappear but if i downgrade to v5.2.0 It worked.

What are the steps to reproduce?

I've reproduced at stackblitz

What is the use-case or motivation for changing an existing behavior?

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular: 5.2.6
Material: 5.2.2

Is there anything else we should know?

Take a look:

[julianobrasil]

It works fine in 5.2.1. The issue has begun in 5.2.2.

[HitomiTenshi]

I can confirm. Works fine in 5.2.1 but happens in 5.2.2.

[julianobrasil]

@irowbin, you can work it around encapsulating the submenu in a component: https://stackblitz.com/edit/angular-material-nested-submenu

[crisbeto]

Your Stackblitz appears to be missing the Material core theme which also contains some base styling that makes the overlays work. I couldn't reproduce the issue after moving it to a Stackblitz that has everything set up correctly.

[rafaelcgdf]

@crisbeto I'm using a custom theme, how do I fix for that? I'm using 5.2.1 in the meanwhile

[crisbeto]

This isn't something that is likely to have broken between 5.2.1 and 5.2.2. As mentioned in the theming guide when you're defining a custom theme, you need to @include mat-core() at least once in your codebase.

[julianobrasil]

@crisbeto, I was able to reproduce this issue in a template from the docs site: https://stackblitz.com/edit/angular-material-nested-submenu-nwwsr6

[rafaelcgdf]

@crisbeto I already have @include mat-core() in my scss =/

[crisbeto]

I see what you mean now. The issue was introduced in #9971 which caused the top-level menu to pick up the items inside the submenu as its own.