From ca26b6ca3c71a293e0bb9657afcb8e57f7997d08 Mon Sep 17 00:00:00 2001 From: crisbeto Date: Tue, 6 Aug 2019 14:33:46 +0300 Subject: [PATCH] fix(menu): inconsistent behavior when clicking on a disabled item 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. --- 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 dbeb914eab75..615e9add8585 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 1b3d5bcc4da8..94a71a7ce038 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,