bug(Menu): Incorrect position of submenu while using ng-template

[csisy]

Is this a regression?

• [X] Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

11.x

Description

After some digging, I found the commit that break the positioning of the submenu when the menu items are created by using ng-template

The first related issue is #16167 and the corresponding commit changed the way the padding is determined. Instead of using a fix value, it calculates the padding from the "offset of the first item".

Also, another issue (which is still open) #14842 clearly states that @ContentChildren does not find child elements created via ngTemplateOutlet.

These hand in hand break our code when we changed Angular version. Here is what happens:

• We have a template for "no-child menu items"
• The menu item is created by using ngTemplateOutlet when the menu item does not have any child element
• Otherwise, a button[mat-menu-item] is created directly

This causes a problem, since the _items collection of the menu does not contain the elements created from the ng-template so the calculated "padding" is totally wrong (in our case 200px instead of 8px).

A possible fix would be that instead of using the first item offset, the style of the first item's parent could be calculated using window.getComputedStyle, for example.

Reproduction

Steps to reproduce (see stackblitz):

1. Open the main menu
2. Open a submenu (position is off)

The stackblitz is greatly simplified.

Expected Behavior

The appropriate padding should be calculated so the submenu can be shown in the right place.

Actual Behavior

The submenu is shown in the wrong place

Environment

• Angular: 14.2.0
• CDK/Material: 14.2.0
• Browser(s): Google Chrome 108.0.5359.95
• Operating System (e.g. Windows, macOS, Ubuntu): Windows 10

[SLKnutson]

As a work around, you can add a hidden disabled button as an item of the parent menu.

[maertz]

Still there, recreated the stackblitz sample from @csisy with the nested menu sample from the docs. Thanks @SLKnutson for the workaround!

[neodescis]

This is also reproducible if all of the parent-level menu items are simply if/else'd. The workaround with an always-there hidden menu item (with display: none) works like a charm.