fix(menu): inconsistent behavior when clicking on a disabled item (#1…

…6696)

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 d431f20)

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('');
   });
 

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;
   }
 

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('');
   });
 

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,