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

[StefanoLucchi]

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
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'.

[rickhopkins]

I am seeing this error happening as well. Any word on a fix?

[johannesjo]

Same error here with 7.2.2 and 7.3.0 . Does not happen when being outside a *ngFor but inside I'm reliably able to reproduce the issue.

[johannesjo]

Still an issue with 8.0.0.

[lewisames]

Here is a workaround that fixed it for me: use the menuOpened and menuClosed Outputs to set the disabled property of the trigger.

<button
  #menuTrigger
  [matMenuTriggerFor]="addContactButton"
  (menuOpened)="menuTrigger.disabled = true"
  (menuClosed)="menuTrigger.disabled = false"
  i18n>+ Add New</button>

[matthieudesprez]

Here is a workaround that fixed it for me: use the menuOpened and menuClosed Outputs to set the disabled property of the trigger.

<button
  #menuTrigger
  [matMenuTriggerFor]="addContactButton"
  (menuOpened)="menuTrigger.disabled = true"
  (menuClosed)="menuTrigger.disabled = false"
  i18n>+ Add New</button>

Actually, you just have to subscribe to menuClosed EventEmitter to get it "fixed", at least in my case.

<button #menuTrigger [matMenuTriggerFor]="menu" (menuClosed)="(true)">+</button>

Not sure why because if I subscribe directly to menuClosed in MatMenuTrigger directive I still have this issue.

[duxor]

Here is a workaround that fixed it for me: use the menuOpened and menuClosed Outputs to set the disabled property of the trigger.

<button
  #menuTrigger
  [matMenuTriggerFor]="addContactButton"
  (menuOpened)="menuTrigger.disabled = true"
  (menuClosed)="menuTrigger.disabled = false"
  i18n>+ Add New</button>

Actually, you just have to subscribe to menuClosed EventEmitter to get it "fixed", at least in my case.

<button #menuTrigger [matMenuTriggerFor]="menu" (menuClosed)="(true)">+</button>

Not sure why because if I subscribe directly to menuClosed in MatMenuTrigger directive I still have this issue.

Works for me
Angular 8.2.11
Angular Material 8.2.3

[jpike88]

is there a solution to this that isn't an ugly workaround?

[anamikamca]

I need aria-expanded=false when menu is not opened. What is the fix for this?

[pawelkondraciuk]

When matMenuTrigger is used in component with OnPush change detection strategy then aria-expanded is not changing. I suppose it is caused because menu trigger has default change detection strategy.

Quick workaround to trigger change detection

<button
  [matMenuTriggerFor]="menu"
  (menuClosed)="(true)"
>