From 2ca7e992c384559cac47529cec08250d37b76be0 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Sat, 24 Dec 2022 10:07:15 +0200 Subject: [PATCH] fix(material/menu): prevent pointer events on animating menu Ports over a fix from the legacy menu to the MDC-based one. Disables pointer events on a menu that is still animating in order to prevent wrong taps. Fixes #26306. --- src/material/menu/menu.scss | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/src/material/menu/menu.scss b/src/material/menu/menu.scss index 8f891caaecf9..deb341bf9391 100644 --- a/src/material/menu/menu.scss +++ b/src/material/menu/menu.scss @@ -22,6 +22,17 @@ mat-menu { } .mat-mdc-menu-panel { + // Prevent users from interacting with the panel while it's animating. Note that + // people won't be able to click through it, because the overlay pane will catch the click. + // This fixes the following issues: + // * Users accidentally opening sub-menus when the `overlapTrigger` option is enabled. + // * Users accidentally tapping on content inside the sub-menu on touch devices, if the + // sub-menu overlaps the trigger. The issue is due to touch devices emulating the + // `mouseenter` event by dispatching it on tap. + &.ng-animating { + pointer-events: none; + } + @include cdk.high-contrast(active, off) { outline: solid 1px; }