bug(mat-menu): sub-menu opens even after root menu is closed due to fast mouse movement

[JeyP90]

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

18

Description

There appears to be a bug in the mat-menu component where a sub-menu can remain open even after the root menu is closed — specifically when performing fast mouse movements after clicking a menu item.

This issue has been present since Angular 19.

Reproduction

Angular Material Documentation link: https://v19.material.angular.dev/components/menu/examples (Nested Menu Example)

Steps to reproduce:

• Open any menu that contains at least one item with a sub-menu.
• Click on a menu item above or below the one that opens a sub-menu.
• Immediately after clicking (which closes the menu), quickly move the mouse cursor toward the position where the sub-menu would have opened (either up or down, depending on item position).
• Observe the following:
  • The menu closes as expected.
  • However, the sub-menu still opens and remains visible on the screen ("floating") even though its parent menu is no longer open.
  • Additionally, if you open the original menu again, the floating sub-menu container (cdk-overlay) appears visually "attached" to the newly opened menu until you interact with it again (e.g., hover or click a menu item).

This seems to be related to a race condition between the mouseenter event on the sub-menu trigger and the menu close event caused by the item click. It leads to the sub-menu being triggered while the menu system is in the process of shutting down.

I have attached a GIF demonstrating the issue:

Expected Behavior

When the parent menu is closed, no sub-menus should open or remain open, and re-opening the menu should start cleanly without previously open overlay artifacts.

Actual Behavior

• The sub-menu opens even though the root menu has already been closed.
• The sub-menu persists on screen and behaves incorrectly when the main menu is opened again.
• This creates confusing UI behavior and leaves orphaned overlays until another menu interaction occurs.

Environment

Angular CLI: 19.2.15
Node: 20.18.0
Package Manager: npm 10.8.2
OS: darwin arm64
Browser: Chrome (others not tested, but likely reproducible there as well)

Package Version

@angular-devkit/architect 0.1902.15
@angular-devkit/core 19.2.15
@angular-devkit/schematics 19.2.15
@angular/cdk 19.2.19
@angular/cli 19.2.15
@angular/fire 19.2.0
@angular/material 19.2.19
@angular/material-moment-adapter 19.2.19
@schematics/angular 19.2.15
rxjs 7.8.2
typescript 5.8.3
zone.js 0.15.1

[crisbeto]

I managed to reproduce it as well, although it was a bit sporadic and I had to slow down the animations to 10%.