From 3550a8798a5aa51e945121c0fcf4e17b4e882faa Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Wed, 19 Jun 2024 19:28:13 +0200 Subject: [PATCH] fix(material/menu): animation issue when same menu is used for multiple nested triggers (#29280) If the same menu is passed to different triggers and the user moves quickly between the menus (e.g. in a nested menu), an empty menu panel can show up while the closed menu is animating away. This is because the content needs to be moved over to the new menu. These changes hide the empty menu panel immediately using CSS to avoid the glichy behavior. --- src/material/menu/menu.scss | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/material/menu/menu.scss b/src/material/menu/menu.scss index e7eb9c4be35e..09cb3009f16c 100644 --- a/src/material/menu/menu.scss +++ b/src/material/menu/menu.scss @@ -56,6 +56,13 @@ mat-menu { // `mouseenter` event by dispatching it on tap. &.ng-animating { pointer-events: none; + + // If the same menu is assigned to multiple triggers and the user moves quickly between them + // (e.g. in a nested menu), the panel for the old menu may show up as empty while it's + // animating away. Hide such cases since they can look off to users. + &:has(.mat-mdc-menu-content:empty) { + display: none; + } } @include cdk.high-contrast(active, off) {