angular / angular/components

bug(cdk/menu): menu is closed on mousedown event

Open
#27,878 2 comments 2 reactions 0 assignees View on GitHub
Accessibility area: cdk/menu P3
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

### Is this a regression?

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

### The previous version in which this bug was not present was

14

### Description

When menu is opened, using standalone trigger, it is closed by clicking outside the menu on mousedown event.

### Reproduction

1. Go to the CDK menu examples page: https://material.angular.io/cdk/menu/examples.
2. Open the menu using "Click me!" button under "Menu with Standalone Trigger".
3. Click outside the menu.

### Expected Behavior

Menu should be closed using mouseup event to comply with WCAG Level A - 2.5.2 criterion (https://www.w3.org/TR/WCAG21/#pointer-cancellation)

### Actual Behavior

Menu is closed with mousedown event.
The same bahavior appears in CDK v15 - https://v15.material.angular.io/cdk/menu/examples
But not in v14 - https://v14.material.angular.io/cdk/menu/examples

Also latest Material Menu component works as expected - https://material.angular.io/components/menu/examples

### Environment

- Angular: 15, 16
- CDK/Material: 15, 16
- Browser(s): latest Chrome, Firefox, Safari
- Operating System (e.g. Windows, macOS, Ubuntu): macOS (14.0 and 13.6)

Contributor guide

Open the contributing guide

Research direction

The issue points to the CDK menu examples page and its standalone-trigger example. Reproduce the outside-click behavior first, then trace the CDK menu event handling; done means the menu closes on mouseup rather than mousedown, matching the expected WCAG pointer-cancellation behavior and the working v14 and Material menu examples.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
accessibility, frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.