From e441a759d4246f207b4f4ee954f4ea4f83c23cce Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Wed, 21 Aug 2019 22:51:35 +0200 Subject: [PATCH] fix(menu): inconsistent behavior when clicking on a disabled item (#16696) With our current setup any click inside a menu will close it, however browsers don't trigger mouse events when clicking on disabled buttons. This is somewhat consistent, however browsers **do** trigger events for non-disabled child nodes of a button (e.g. an icon). This means that there will be regions inside of a disabled item that will behave differently from others. These changes make the behavior consistent by disabling pointer events on disabled items, allowing the user to click through and have the menu act as if it was a click anywhere else. Fixes #16694. (cherry picked from commit d431f2019fe6635df5e204cc2895d8a5041d7e23) --- src/material-experimental/mdc-menu/menu.e2e.spec.ts | 2 +- src/material-experimental/mdc-menu/menu.scss | 6 ++++++ src/material/menu/menu.e2e.spec.ts | 2 +- src/material/menu/menu.scss | 9 +++++++++ 4 files changed, 17 insertions(+), 2 deletions(-) diff --git a/src/material-experimental/mdc-menu/menu.e2e.spec.ts b/src/material-experimental/mdc-menu/menu.e2e.spec.ts index 4a79dddc37f3..5f7b99138052 100644 --- a/src/material-experimental/mdc-menu/menu.e2e.spec.ts +++ b/src/material-experimental/mdc-menu/menu.e2e.spec.ts @@ -57,7 +57,7 @@ describe('menu', () => { it('should run not run click handlers on disabled menu items', async () => { await page.trigger().click(); - await page.items(2).click(); + await browser.actions().mouseMove(page.items(2)).click(); expect(await page.getResultText()).toEqual(''); }); diff --git a/src/material-experimental/mdc-menu/menu.scss b/src/material-experimental/mdc-menu/menu.scss index f7f23179a3de..1c88c28c4d2a 100644 --- a/src/material-experimental/mdc-menu/menu.scss +++ b/src/material-experimental/mdc-menu/menu.scss @@ -40,6 +40,12 @@ text-decoration: none; &[disabled] { + // Usually every click inside the menu closes it, however some browsers will stop events + // when the user clicks on a disabled item, **except** when the user clicks on a non-disabled + // child node of the disabled button. This is inconsistent because some regions of a disabled + // button will still cause the menu to close and some won't (see #16694). We make the behavior + // more consistent by disabling pointer events and allowing the user to click through. + pointer-events: none; cursor: default; } diff --git a/src/material/menu/menu.e2e.spec.ts b/src/material/menu/menu.e2e.spec.ts index 96914679dda0..92386e02764b 100644 --- a/src/material/menu/menu.e2e.spec.ts +++ b/src/material/menu/menu.e2e.spec.ts @@ -57,7 +57,7 @@ describe('menu', () => { it('should run not run click handlers on disabled menu items', async () => { await page.trigger().click(); - await page.items(2).click(); + await browser.actions().mouseMove(page.items(2)).click(); expect(await page.getResultText()).toEqual(''); }); diff --git a/src/material/menu/menu.scss b/src/material/menu/menu.scss index 3e5251b3c515..cf477589ad7c 100644 --- a/src/material/menu/menu.scss +++ b/src/material/menu/menu.scss @@ -44,6 +44,15 @@ $mat-menu-submenu-indicator-size: 10px !default; @include mat-menu-item-base(); position: relative; + &[disabled] { + // Usually every click inside the menu closes it, however some browsers will stop events + // when the user clicks on a disabled item, **except** when the user clicks on a non-disabled + // child node of the disabled button. This is inconsistent because some regions of a disabled + // button will still cause the menu to close and some won't (see #16694). We make the behavior + // more consistent by disabling pointer events and allowing the user to click through. + pointer-events: none; + } + @include cdk-high-contrast { &.cdk-program-focused, &.cdk-keyboard-focused,