bug(CdkMenuItem): Using CdkMenuItem as hostDirective not working properly

[johnnyelwailer]

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

I want to create a custom menu component, that utilizes CdkMenu:

@Component({
  selector: 'custom-menu',
  standalone: true,
  template: '<ng-content></ng-content>',
  hostDirectives: [CdkMenu],
})
export class CustomMenu {}

@Directive({
  selector: 'customMenuItem',
  standalone: true,
  hostDirectives: [CdkMenuItem],
})
export class CustomMenuItem {}

<button [cdkMenuTriggerFor]="customMenuTmpl">Open CUSTOM menu</button>

<ng-template #customMenuTmpl>
  <custom-menu>
    <button customMenuItem>Item 1</button>
    <button customMenuItem>Item 2</button>
    <button customMenuItem>Item 3</button>
  </custom-menu>
</ng-template>

However, the issue is, that the menu item does not behave as expected.

Reproduction

StackBlitz link: https://stackblitz.com/edit/qau9h1-invtxe?file=src%2Fexample%2Fexample.html
Steps to reproduce:

1. For each button:
2. Focus with keyboard
3. Use arrows to navigate

Expected Behavior

Both menus should behave the same. The keyboard navigation should work.

Actual Behavior

The custom menu attaching a CdkMenuItem using hostDirectives does not have the same behavior as when using plain cdkMenuItem directives directly. Keyboard navigation does not work, and clicking an item does not close the menu.

Environment

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

[crisbeto]

I think you'd also have to do providers: [{provide: CdkMenuItem, useExisting: CustomMenuItem}] so it can be picked up by the queries in the CDK menu.

[johnnyelwailer]

Hello, thanks for the Tip. When I updated the reproduction sample, this fix did not change the behavior: https://stackblitz.com/edit/qau9h1-x722dt?file=src%2Fexample%2Fexample.ts

[erengeez]

I have encountered a similar issue, but with nested menus. Sub menus on custom menu items appear on focus, but do not disappear afterwards, overlapping each other as a result. I've modified the reproduction sample with my example - https://stackblitz.com/edit/qau9h1-k7rxtr?file=src%2Fexample%2Fexample.html

[liesahead]

@crisbeto , sadly, your provided example doesn't work. Currently it feels like there's not much difference between material and cdk because we cannot use cdk to implement reusable menu with custom ui.

Idea was to have a menu component and menuItem directive which would be used like that.

<menu>
    <span menuItem>item 1</span>
</menu>

Menu pseudo-html

<button [cdkMenuTriggerFor]="menu">
    [Value]
</button>

<ng-template #menu>
    <div cdkMenu>
        <ng-content />
    </div>
</ng-template>

Where ng-content would be menuItem that has a CdkMenuItem listed in hostDirectives array. But such exception is thrown if menu-item is used instead of cdkMenuItem

❗NullInjectorError: No provider for InjectionToken cdk-menu-stack!