angular / angular/components

menu: trigger ExpressionChangedAfterItHasBeenCheckedError aria-expanded: null in OnPush component

Open
#14,440 9 comments 14 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

#### What is the expected behavior?
Error should not occur

#### What is the current behavior?
Repeatedly and quickly clicking on menu trigger button causes error

#### What are the steps to reproduce?
[StackBlitz](https://stackblitz.com/edit/angular-stgyux)
Click on menuTrigger repeatedly -> error shows in console

#### Which versions of Angular, Material, OS, TypeScript, browsers are affected?
Angular 7.1.0
Angular Material 7.1.0
Chrome Browser

#### Is there anything else we should know?
ChangeDetection: OnPush

ERROR
Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'aria-expanded: true'. Current value: 'aria-expanded: null'.

Contributor guide

Open the contributing guide

Research direction

Start with the linked StackBlitz reproduction using Angular and Angular Material 7.1.0, then repeatedly click the menu trigger in an OnPush component while watching the console. Trace the menu trigger's aria-expanded changes and determine why the checked value changes to null; done means the reproduction no longer reports ExpressionChangedAfterItHasBeenCheckedError.

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
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.