Skip to content

Commit

Permalink
fix(menu): inconsistent behavior when clicking on a disabled item
Browse files Browse the repository at this point in the history
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.
  • Loading branch information
crisbeto committed Aug 6, 2019
1 parent 8e321ae commit 98b32f6
Show file tree
Hide file tree
Showing 2 changed files with 15 additions and 0 deletions.
6 changes: 6 additions & 0 deletions src/material-experimental/mdc-menu/menu.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Expand Down
9 changes: 9 additions & 0 deletions src/material/menu/menu.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down

0 comments on commit 98b32f6

Please sign in to comment.