bug(cdkMenuItem): Pressing "Enter" on non-button and non-anchor elements reopens the menu unexpectedly.

[chandanbhatt]

Description

When using the cdkMenuItem directive on non-button and non-anchor elements (e.g., <div> or <span>), pressing the "Enter" key causes the current menu to reopen unexpectedly. This issue affects accessibility and usability when creating custom menu components. Menu is properly closed on mouse click and pressing the "Spacebar" key.

Reproduction

StackBlitz link: https://stackblitz.com/edit/vsy7hsgs?file=src%2Fexample%2Fcdk-menu-menubar-example.html
Steps to reproduce:

1. Create a cdkMenu with cdkMenuItem directives applied to non-button and non-anchor elements (e.g., <div>).
2. Open the menu and navigate to a menu item using the keyboard.
3. Press the "Enter" key on a non-button cdkMenuItem.

Expected Behavior

The menu should not reopen or toggle when "Enter" is pressed on a cdkMenuItem element if no additional click or keyboard action is configured.

Actual Behavior

Pressing "Enter" on a cdkMenuItem element (e.g., <div>) causes the menu to reopen unexpectedly.

Environment

• Angular: v19.0.0
• CDK/Material: v19.0.0
• Browser(s): Google Chrome | Version 131.0.6778.86
• Operating System: macOS 14.3.1

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