bug(MatMenu): focus breaks if ngTemplateOutlet is used in mat-menu

[dil-btarkovacs]

trafficstars

Is this a regression?

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

The previous version in which this bug was not present was

No response

Description

<button mat-button [matMenuTriggerFor]="menu">Menu</button>
<mat-menu #menu="matMenu">
  <ng-container *ngTemplateOutlet="menuTemplate"></ng-container>
</mat-menu>
<ng-template #menuTemplate>
  <button mat-menu-item>Item 1</button>
  <button mat-menu-item>Item 2</button>
</ng-template>

In case of using ngTemplateOutlet in mat-menu (see code example above), the focus doesn't work as expected (see behavior sections).

Reproduction

Steps to reproduce:

1. Go here: https://stackblitz.com/edit/components-issue-poqngq?file=src/app/example-component.html
2. Use the tab button to navigate to (and focus) the Menu with ngTemplateOutlet button
3. Press space to open the dropdown menu
4. try to use the up/down arrow keys to move between menu items

Expected Behavior

• First menu item is focused when dropdown is opened.
• Up/down arrow keys can be used to navigate through the menu items.

(Expected behavior can be checked on the Menu without ngTemplateOutlet button too)

Actual Behavior

• First menu item is not focused when dropdown is opened.
• Up/down arrow keys can't be used to navigate through the menu items.

Note: If the user keep pressing the tab, they can eventually focus the first menu item in the dropdown, but even then, the arrow keys won't work.

Environment

• Angular: 14.1.3
• CDK/Material: 14.1.3
• Browser(s): Chrome (104.0.5112.102), FireFox (104.0.2)
• Operating System (e.g. Windows, macOS, Ubuntu): Windows 11