You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
Is this a regression?
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 viangTemplateOutlet
.These hand in hand break our code when we changed Angular version. Here is what happens:
ngTemplateOutlet
when the menu item does not have any child elementbutton[mat-menu-item]
is created directlyThis causes a problem, since the
_items
collection of the menu does not contain the elements created from theng-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):
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
The text was updated successfully, but these errors were encountered: