Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Closed
chandanbhatt opened this issue Dec 30, 2024 · 0 comments · Fixed by #30263
Closed

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

chandanbhatt opened this issue Dec 30, 2024 · 0 comments · Fixed by #30263
Assignees
@crisbeto
Labels
area: cdk/menu P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent

Comments

@chandanbhatt
Copy link

chandanbhatt commented Dec 30, 2024 •
edited
Loading

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
@chandanbhatt chandanbhatt added the needs triage This issue needs to be triaged by the team label Dec 30, 2024
crisbeto added a commit to crisbeto/material2 that referenced this issue Jan 2, 2025
@crisbeto
fix(cdk/menu): avoid re-opening the menu on enter
422445e 
Fixes that the CDK menu was re-opening immediately on enter presses on elements that aren't buttons or links.

Fixes angular#30250.
@crisbeto crisbeto mentioned this issue Jan 2, 2025
Merged
@crisbeto crisbeto self-assigned this Jan 2, 2025
@crisbeto crisbeto added P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent area: cdk/menu and removed needs triage This issue needs to be triaged by the team labels Jan 2, 2025
crisbeto added a commit that referenced this issue Jan 2, 2025
@crisbeto
fix(cdk/menu): avoid re-opening the menu on enter (#30263)
52758be 
Fixes that the CDK menu was re-opening immediately on enter presses on elements that aren't buttons or links.

Fixes #30250.
crisbeto added a commit that referenced this issue Jan 2, 2025
@crisbeto
fix(cdk/menu): avoid re-opening the menu on enter (#30263)
64d8df8 
Fixes that the CDK menu was re-opening immediately on enter presses on elements that aren't buttons or links.

Fixes #30250.

(cherry picked from commit 52758be)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@crisbeto crisbeto

Labels
area: cdk/menu P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(cdk/menu): avoid re-opening the menu on enter crisbeto/material2
2 participants
@crisbeto @chandanbhatt