bug(menu): ERROR RuntimeError: NG0100: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value for 'mat-menu-panel-animating': 'true'. Current value: 'false'. Expression location: _MatMenu component.

[anisabboud]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

Reproduction

components/src/material/menu/menu.html

Line 8 in ef70029

[class.mat-menu-panel-animating]="_isAnimating"

components/src/material/menu/menu.ts

Lines 455 to 472 in ef70029

	protected _onAnimationDone(state: string) {
	const isExit = state === EXIT_ANIMATION;
	if (isExit || state === ENTER_ANIMATION) {
	if (isExit) {
	clearTimeout(this._exitFallbackTimeout);
	this._exitFallbackTimeout = undefined;
	}
	this._animationDone.next(isExit ? 'void' : 'enter');
	this._isAnimating = false;
	}
	}
	protected _onAnimationStart(state: string) {
	if (state === ENTER_ANIMATION || state === EXIT_ANIMATION) {
	this._isAnimating = true;
	}
	}

Expected Behavior

_isAnimating should probably be a signal (since it's used in the template), or _changeDetectorRef would need to be notified to avoid the console warning.

Actual Behavior

NG0100: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked.
Previous value for 'mat-menu-panel-animating': 'true'. Current value: 'false'.
Expression location: _MatMenu component.

Environment

• Angular: 20.3.2 (latest)
• CDK/Material: 20.2.5 (latest)
• Browser(s): Chrome 140
• app.config.ts providers include:

      provideCheckNoChangesConfig({ interval: 1000, exhaustive: true }),  // For debugging zoneless locally https://angular.dev/guide/zoneless#debug-mode-check-to-ensure-updates-are-detected.

[crisbeto]

Sent #31934 although I wasn't able to reproduce it.

[anisabboud]

Thank you for the quick fix, @crisbeto!

Sorry I forgot to mention - I've seen the error in a nested menu, when moving the mouse quickly between items.

---

It's a bit challenging to reproduce "consistently" on StackBlitz, but it's possible:

1. I opened the "Nested menu" example in StackBlitz https://material.angular.dev/components/menu/examples#menu-nested
2. Added provideZonelessChangeDetection() to main.ts
3. Duplicated the Vertebrates/Invertebrates buttons 5 times to get ~10 buttons.
4. Moving the mouse quickly between menu items, sometimes the error shows up.

20250928-0825-57.3393275.mp4

StackBlitz link: https://stackblitz.com/edit/i3e6fva3?file=src%2Fmain.ts,src%2Fexample%2Fmenu-nested-example.html

(In the video above the error showed up 11 times. In my project it reproduces much more consistently, perhaps because the menu is more complex than the basic example, with custom icons component, lazy loading etc.)