Menu items are not accessible via keyboard when using ng-content

[haperr]

What is the expected behavior?

Menu items should be accessible via the keyboard.

What is the current behavior?

Menu items are not accessible via the keyboard after menu is opened.

What are the steps to reproduce?

Expected behavior (without using ng-content):
https://stackblitz.com/edit/mat-menu-keyboard-accessibility?file=src/dropdown/dropdown.component.html

Actual behavior (using ng-content):
https://stackblitz.com/edit/mat-menu-keyboard-accessibility-bug?file=src/dropdown/dropdown.component.html

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

Angular: 7.2.1
Material: 7.2.1
TypeScript: 3.1.1
Observed in both Chrome and Edge on Windows.

[crisbeto]

The menu works by picking up the menu items using ContentChildren. When you're projecting the elements like this, there's no way for it to pick them up.

[kasperlauge]

Experiencing the same issue, any workaround for this? I think it would be an important extension as this would enable isolating the material menu in a component with dynamic number of children.

Also if you don't know all the elements within the context menu before opening it, I would like to display a loading spinner within the context menu, but when replacing the spinner with the actual menu contents breaks keyboard navigation aswell.

[osuritz]

Ping. We are facing this issue internally as well and based on the work on #11720 it seems like adding menu items dynamically should be a supported scenario.

[angular-automatic-lock-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.}