angular / angular/components

bug(MENU): Types of property 'hasBackdrop' are incompatible

Open
#24,078 2 comments 6 reactions 0 assignees View on GitHub
area: material/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

Definitely worked in 12.2.9, didn't check with later versions

### Description

On version 13.1.0 with `exactOptionalPropertyTypes` flag,
when trying to use the Menu component, following error shows up in Terminal:
![image](https://user-images.githubusercontent.com/52247963/145472621-6cae98b6-0f33-48bf-980b-34b2ad9bf698.png)

### Reproduction

StackBlitz Example project doesn't build on latest version, so I couldn't reproduce it for you. You can see it working on v12: https://stackblitz.com/edit/components-issue-fau7sh?file=src%2Fapp%2Fexample-component.html.

To check locally, create a new Angular 13 project, install the material library and enable the `exactOptionalPropertyTypes` flag in `tsconfig.json`

### Expected Behavior

Code compiles and Menu works.

### Actual Behavior

Code doesn't compile, Menu doesn't work.

### Environment

- Angular: 13.1.0
- CDK/Material: 13.1.0
- Browser(s): Chrome 96
- Operating System: Windows 11

If you guys have any questions, let me know

Contributor guide

Open the contributing guide

Research direction

Start by creating the Angular 13 project described in the issue, enabling exactOptionalPropertyTypes in tsconfig.json, and using the Menu component. Compare the type error with version 12.2.9 and inspect the Menu-related type definitions involved. Done means the project compiles and the Menu works with the flag enabled.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
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.