Components: Release 8.1.0 introduce an undocummented breaking change in MatMenu

[palpatine1991]

Reproduction

Working version on Material 8.0.0: https://stackblitz.com/edit/components-issue-6khp86

Non-working version on Material 8.1.0: https://stackblitz.com/edit/components-issue-bntnr9

Caused by https://github.com/angular/components/commit/49e8c59

Steps to reproduce:

1. Open menu
2. Try to use keyboard navigation - up-down arrows (does not work on version 8.1.0)

It also does not work in case of opening sub-menus by mouse hover

Expected Behavior

It should work the same since it is not mentioned in changelog and is introduced in minor version

Actual Behavior

In version 8.1.0 when mat-menu-item is used inside of nested component, it does not register to parent.

Environment

• Angular: 8.0.0
• CDK/Material: 8.1.0
• Browser(s): Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): Windows

[RandomNonameDude]

I came across the very same problem after updating the versions recently and it's a pure blocker for me...

[palpatine1991]

Also, if I am not mistaken, this blocks the only way how to use MatMenu for infinite nesting

[klemenoslaj]

I was just about to report this issue myself.
I wrote a small library for dynamic menu rendering (ng-action-outlet - feel free to use it) and this issue really is a show stopper.

---

This is either a BREAKING CHANGE either a bug. Preferably a bug, because we for sure need the possibility to infinitely nest menus.

[RandomNonameDude]

Any news here? We're waiting for this fix like children for Christmas...

[dgsmith2]

This relates to the existing #16457. There was PR (#16502) to revert the breaking change. It was approved yet never merged, simply closed with no explanation.

[palpatine1991]

@jelbourn can we get some kind of comment whether the mentioned pull request was closed intentionally? In our team we need to decide whether to implement some ugly workarounds to make it work with latest Material or whether we can wait some time for reverting the breaking change.

It would help us a lot to at least know what to expect. Thanks in advance!

[jelbourn]

That fact that menu items previously ignored component boundaries was a bug and was inconsistent with the way that all other Angular components work. The underlying issue also caused menu items to be in the wrong order for keyboard interaction, which is a pretty bad bug (especially for a11y). We have no plans of reverting this change, but we have been looking into other ways of programatically providing additional items for the menu.

[klemenoslaj]

@jelbourn thanks a lot for the explanation 👍

---

Bottom line is, currently material does not support programmatic nesting which breaks some applications. That's a bad news.

---

Could we perhaps keep this issue opened until the functionality is available again (_unless it's not in your plans any more to support it_)?

[jelbourn]

It's something we're thinking about more broadly, and it has implications on things like integrating virtual scrolling into the existing components, but there's no ETA now

[Harpush]

To everyone looking for dynamic menus in angular 8 i made a working example:
https://stackblitz.com/edit/dynamic-material-menu-angular-8

[klemenoslaj]

I managed to update ng-action-outlet above Material ~8.1.0. This required a substantial refactoring though.

If you're writing your own component to render menus dynamically, the key is to maintain the direct menu nesting between mat-menu and mat-menu-item, without any components in between, due to that recent material change of querying for direct children only.

Example from @Harpush demonstrates this nicely: https://github.com/angular/components/issues/17073#issuecomment-548547557

---

Anyone interested in a library, here are the usage examples:

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}