bug(Menu): Wrapping Menu in your own component breaks focusFirstItem

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

In the example below…

1. focus on the menu trigger (the button) then hit Enter on keyboard…
2. the menu.js code runs the focusFirstItem method…
3. this._directDescendantItems is empty… and thus keyboard navigation breaks on the dropdown breaks

BROKEN EXAMPLE (pass the values of dropdown from parent component):

@Component({
  selector: 'app-dropdown',
  template: `
    <button [matMenuTriggerFor]="dd">{{label}}</button>
    <mat-menu #dd="matMenu">
      <ng-content></ng-content>
    </mat-menu>
  `,
  ...

parent component:

<app-dropdown label="My Dropdown">
   <button mat-menu-item>Settings</button>
   <button mat-menu-item>Log off</button>
</app-dropdown>

Hard-coding things there works fine (obviously):

@Component({
  selector: 'app-dropdown',
  template: `
    <button [matMenuTriggerFor]="dd">{{label}}</button>
    <mat-menu #dd="matMenu">
       <button mat-menu-item>Settings</button>
       <button mat-menu-item>Log off</button>
    </mat-menu>
  `,

this works

Reproduction

Steps to reproduce:

1. wrapper menu with component using slots (content projection)
2. use keyboard to open menu

Expected Behavior

Opening menu with keyboard would focus first menu-item

Actual Behavior

Opening menu with keyboard fails to focus menu items

Environment

• Angular: 14.0.4
• CDK/Material: 14.0.4
• Browser(s): Chrome Latest (103)
• Operating System (e.g. Windows, macOS, Ubuntu): Windows 10

[rothsandro]

@marcel-goldammer Ah, the menu items are in a third component. Yes, that doesn’t work. menu + menu item must be in the same component, only the button can be extracted and reused 😦

[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.}