feat(material/menu): enhance menu item component with interactive disabled state

In menu-item component add an option `disabledInteractive` to interact with menu item in disabled state similar to `mat-button`, `mat-radio`, etc

Fixes angular#29984

Author: mistrykaran91

goldens/material/menu/index.api.md

@@ -151,6 +151,7 @@ export class MatMenuItem implements FocusableOption, AfterViewInit, OnDestroy {
     constructor(...args: unknown[]);
     _checkDisabled(event: Event): void;
     disabled: boolean;
+    disabledInteractive: boolean;
     disableRipple: boolean;
     focus(origin?: FocusOrigin, options?: FocusOptions): void;
     readonly _focused: Subject<MatMenuItem>;
@@ -165,6 +166,8 @@ export class MatMenuItem implements FocusableOption, AfterViewInit, OnDestroy {
     // (undocumented)
     static ngAcceptInputType_disabled: unknown;
     // (undocumented)
+    static ngAcceptInputType_disabledInteractive: unknown;
+    // (undocumented)
     static ngAcceptInputType_disableRipple: unknown;
     // (undocumented)
     ngAfterViewInit(): void;
@@ -179,7 +182,7 @@ export class MatMenuItem implements FocusableOption, AfterViewInit, OnDestroy {
     _setTriggersSubmenu(triggersSubmenu: boolean): void;
     _triggersSubmenu: boolean;
     // (undocumented)
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatMenuItem, "[mat-menu-item]", ["matMenuItem"], { "role": { "alias": "role"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "disableRipple": { "alias": "disableRipple"; "required": false; }; }, {}, never, ["mat-icon, [matMenuItemIcon]", "*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatMenuItem, "[mat-menu-item]", ["matMenuItem"], { "role": { "alias": "role"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "disableRipple": { "alias": "disableRipple"; "required": false; }; "disabledInteractive": { "alias": "disabledInteractive"; "required": false; }; }, {}, never, ["mat-icon, [matMenuItemIcon]", "*"], true, never>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<MatMenuItem, never>;
 }

src/dev-app/menu/BUILD.bazel

@@ -11,10 +11,12 @@ ng_module(
     ],
     deps = [
         "//src/material/button",
+        "//src/material/checkbox",
         "//src/material/divider",
         "//src/material/icon",
         "//src/material/menu",
         "//src/material/toolbar",
+        "//src/material/tooltip",
     ],
 )
 

src/dev-app/menu/menu-demo.html

@@ -10,7 +10,12 @@
 
     <mat-menu #menu="matMenu">
       @for (item of items; track item) {
-        <button mat-menu-item (click)="select(item.text)" [disabled]="item.disabled">
+        <button
+          mat-menu-item
+          (click)="select(item.text)"
+          [disabled]="item.disabled"
+          [disabledInteractive]="disabledInteractive"
+          [matTooltip]="item.tooltipText">
           {{ item.text }}
         </button>
       }
@@ -27,7 +32,12 @@
 
     <mat-menu #divider="matMenu">
       @for (item of items; track item) {
-        <button mat-menu-item [disabled]="item.disabled">{{ item.text }}</button>
+        <button
+          mat-menu-item
+          [disabled]="item.disabled"
+          [disabledInteractive]="disabledInteractive">
+          {{ item.text }}
+        </button>
         @if (!$last) {
           <mat-divider></mat-divider>
         }
@@ -98,16 +108,18 @@
 
     <mat-menu #anchorMenu="matMenu">
       @for (item of items; track item) {
-        <a mat-menu-item href="https://www.google.com" [disabled]="item.disabled">
+        <a
+          mat-menu-item
+          href="https://www.google.com"
+          [disabled]="item.disabled"
+          [disabledInteractive]="disabledInteractive">
           {{ item.text }}
         </a>
       }
     </mat-menu>
   </div>
   <div class="demo-menu-section">
-    <p>
-      Position x: before
-    </p>
+    <p>Position x: before</p>
     <mat-toolbar class="demo-end-icon">
       <button matIconButton [matMenuTriggerFor]="posXMenu" aria-label="Open x-positioned menu">
         <mat-icon>more_vert</mat-icon>
@@ -116,17 +128,18 @@
 
     <mat-menu xPosition="before" #posXMenu="matMenu">
       @for (item of iconItems; track item) {
-        <button mat-menu-item [disabled]="item.disabled">
+        <button
+          mat-menu-item
+          [disabled]="item.disabled"
+          [disabledInteractive]="disabledInteractive">
           <mat-icon>{{ item.icon }}</mat-icon>
           {{ item.text }}
         </button>
       }
     </mat-menu>
   </div>
   <div class="demo-menu-section">
-    <p>
-      Position y: above
-    </p>
+    <p>Position y: above</p>
     <mat-toolbar>
       <button matIconButton [matMenuTriggerFor]="posYMenu" aria-label="Open y-positioned menu">
         <mat-icon>more_vert</mat-icon>
@@ -135,7 +148,12 @@
 
     <mat-menu yPosition="above" #posYMenu="matMenu">
       @for (item of items; track item) {
-        <button mat-menu-item [disabled]="item.disabled">{{ item.text }}</button>
+        <button
+          mat-menu-item
+          [disabled]="item.disabled"
+          [disabledInteractive]="disabledInteractive">
+          {{ item.text }}
+        </button>
       }
     </mat-menu>
   </div>
@@ -153,14 +171,17 @@
 
     <mat-menu [overlapTrigger]="true" #menuOverlay="matMenu">
       @for (item of items; track item) {
-        <button mat-menu-item [disabled]="item.disabled">{{ item.text }}</button>
+        <button
+          mat-menu-item
+          [disabled]="item.disabled"
+          [disabledInteractive]="disabledInteractive">
+          {{ item.text }}
+        </button>
       }
     </mat-menu>
   </div>
   <div class="demo-menu-section">
-    <p>
-      Position x: before, overlapTrigger: true
-    </p>
+    <p>Position x: before, overlapTrigger: true</p>
     <mat-toolbar class="demo-end-icon">
       <button matIconButton [mat-menu-trigger-for]="posXMenuOverlay">
         <mat-icon>more_vert</mat-icon>
@@ -169,17 +190,18 @@
 
     <mat-menu xPosition="before" [overlapTrigger]="true" #posXMenuOverlay="matMenu">
       @for (item of iconItems; track item) {
-        <button mat-menu-item [disabled]="item.disabled">
+        <button
+          mat-menu-item
+          [disabled]="item.disabled"
+          [disabledInteractive]="disabledInteractive">
           <mat-icon>{{ item.icon }}</mat-icon>
           {{ item.text }}
         </button>
       }
     </mat-menu>
   </div>
   <div class="demo-menu-section">
-    <p>
-      Position y: above, overlapTrigger: true
-    </p>
+    <p>Position y: above, overlapTrigger: true</p>
     <mat-toolbar>
       <button matIconButton [mat-menu-trigger-for]="posYMenuOverlay">
         <mat-icon>more_vert</mat-icon>
@@ -188,10 +210,18 @@
 
     <mat-menu yPosition="above" [overlapTrigger]="true" #posYMenuOverlay="matMenu">
       @for (item of items; track item) {
-        <button mat-menu-item [disabled]="item.disabled">{{ item.text }}</button>
+        <button
+          mat-menu-item
+          [disabled]="item.disabled"
+          [disabledInteractive]="disabledInteractive">
+          {{ item.text }}
+        </button>
       }
     </mat-menu>
   </div>
 </div>
+<div>
+  <mat-checkbox [(ngModel)]="disabledInteractive">Disabled interactive</mat-checkbox>
+</div>
 
 <div style="height: 500px">This div is for testing scrolled menus.</div>

src/dev-app/menu/menu-demo.ts

@@ -7,31 +7,53 @@
  */
 
 import {ChangeDetectionStrategy, Component} from '@angular/core';
+import {FormsModule} from '@angular/forms';
 import {MatButtonModule} from '@angular/material/button';
+import {MatCheckboxModule} from '@angular/material/checkbox';
 import {MatDividerModule} from '@angular/material/divider';
 import {MatIconModule} from '@angular/material/icon';
 import {MatMenuModule} from '@angular/material/menu';
 import {MatToolbarModule} from '@angular/material/toolbar';
+import {MatTooltip} from '@angular/material/tooltip';
 
 @Component({
   selector: 'menu-demo',
   templateUrl: 'menu-demo.html',
   styleUrl: 'menu-demo.css',
-  imports: [MatMenuModule, MatButtonModule, MatToolbarModule, MatIconModule, MatDividerModule],
+  imports: [
+    FormsModule,
+    MatButtonModule,
+    MatCheckboxModule,
+    MatDividerModule,
+    MatIconModule,
+    MatMenuModule,
+    MatToolbarModule,
+    MatTooltip,
+  ],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MenuDemo {
   selected = '';
+  disabledInteractive = true;
+
   items = [
     {text: 'Refresh'},
     {text: 'Settings'},
-    {text: 'Help', disabled: true},
+    {
+      text: 'Help',
+      disabled: true,
+      tooltipText: 'This is a menu item tooltip!',
+    },
     {text: 'Sign Out'},
   ];
 
   iconItems = [
     {text: 'Redial', icon: 'dialpad'},
-    {text: 'Check voicemail', icon: 'voicemail', disabled: true},
+    {
+      text: 'Check voicemail',
+      icon: 'voicemail',
+      disabled: true,
+    },
     {text: 'Disable alerts', icon: 'notifications_off'},
   ];
 

src/material/menu/menu-item.ts

@@ -37,8 +37,9 @@ import {_CdkPrivateStyleLoader} from '@angular/cdk/private';
     '[class.mat-mdc-menu-item-highlighted]': '_highlighted',
     '[class.mat-mdc-menu-item-submenu-trigger]': '_triggersSubmenu',
     '[attr.tabindex]': '_getTabIndex()',
-    '[attr.aria-disabled]': 'disabled',
+    '[attr.aria-disabled]': 'disabled && disabledInteractive ? "true" : null',
     '[attr.disabled]': 'disabled || null',
+    '[class.mat-mdc-menu-item-disabled-interactive]': 'disabledInteractive',
     '(click)': '_checkDisabled($event)',
     '(mouseenter)': '_handleMouseEnter()',
   },
@@ -63,6 +64,10 @@ export class MatMenuItem implements FocusableOption, AfterViewInit, OnDestroy {
   /** Whether ripples are disabled on the menu item. */
   @Input({transform: booleanAttribute}) disableRipple: boolean = false;
 
+  /** Whether the menu item should remain interactive when it is disabled. */
+  @Input({transform: booleanAttribute})
+  disabledInteractive: boolean = false;
+
   /** Stream that emits when the menu item is hovered. */
   readonly _hovered: Subject<MatMenuItem> = new Subject<MatMenuItem>();
 
@@ -117,7 +122,7 @@ export class MatMenuItem implements FocusableOption, AfterViewInit, OnDestroy {
 
   /** Used to set the `tabindex`. */
   _getTabIndex(): string {
-    return this.disabled ? '-1' : '0';
+    return this.disabled && !this.disabledInteractive ? '-1' : '0';
   }
 
   /** Returns the host DOM element. */
@@ -130,6 +135,7 @@ export class MatMenuItem implements FocusableOption, AfterViewInit, OnDestroy {
     if (this.disabled) {
       event.preventDefault();
       event.stopPropagation();
+      return;
     }
   }
 

src/material/menu/menu.scss

@@ -103,10 +103,7 @@ mat-menu {
 
   .mat-divider {
     // Use margin instead of padding since divider uses border-top to render out the line.
-    @include token-utils.use-tokens(
-      tokens-mat-menu.$prefix,
-      tokens-mat-menu.get-token-slots()
-    ) {
+    @include token-utils.use-tokens(tokens-mat-menu.$prefix, tokens-mat-menu.get-token-slots()) {
       color: token-utils.get-token-variable(divider-color);
       margin-bottom: token-utils.get-token-variable(divider-bottom-spacing);
       margin-top: token-utils.get-token-variable(divider-top-spacing);
@@ -165,7 +162,9 @@ mat-menu {
     // The class selector isn't specific enough to overide the link pseudo selectors so we need
     // to target them specifically, otherwise the item color might be overwritten by the user
     // agent resets of the app.
-    &, &:visited, &:link {
+    &,
+    &:visited,
+    &:link {
       @include token-utils.create-token-slot(color, item-label-text-color);
     }
 
@@ -178,6 +177,7 @@ mat-menu {
   &[disabled] {
     cursor: default;
     opacity: 0.38;
+    pointer-events: none;
 
     // The browser prevents clicks on disabled buttons from propagating which prevents the menu
     // from closing, but clicks on child nodes still propagate which is inconsistent (see #16694).
@@ -192,6 +192,15 @@ mat-menu {
       bottom: 0;
       right: 0;
     }
+    @include token-utils.use-tokens(tokens-mat-menu.$prefix, tokens-mat-menu.get-token-slots()) {
+      &.mat-mdc-menu-item-disabled-interactive {
+        pointer-events: auto;
+
+        &:hover {
+          @include token-utils.create-token-slot(background-color, item-hover-state-layer-color);
+        }
+      }
+    }
   }
 
   // Inherited from MDC and necessary for some internal tests.

src/material/menu/menu.spec.ts

@@ -2563,8 +2563,27 @@ describe('MatMenu', () => {
     }));
   });
 
+  describe('disabledInteractive', () => {
+    it('should be have `mat-mdc-menu-item-disabled-interactive` if disabledInteractive is set to true', fakeAsync(() => {
+      let fixture = createComponent(SimpleMenuWithRepeaterAndDisabledInteractive);
+
+      fixture.detectChanges();
+      fixture.componentInstance.trigger.openMenu();
+      fixture.detectChanges();
+      tick(500);
+
+      let menuPanel = document.querySelector('.mat-mdc-menu-panel')!;
+      let items = menuPanel.querySelectorAll('.mat-mdc-menu-panel [mat-menu-item]');
+
+      expect(items[0].classList).toContain('mat-mdc-menu-item-disabled-interactive');
+      expect(items[1].classList).toContain('mat-mdc-menu-item-disabled-interactive');
+
+      flush();
+    }));
+  });
+
   it('should have a focus indicator', fakeAsync(() => {
-    const fixture = createComponent(SimpleMenu, [], [FakeIcon]);
+    const fixture = createComponent(SimpleMenu, [], []);
     fixture.detectChanges();
     fixture.componentInstance.trigger.openMenu();
     fixture.detectChanges();
@@ -2950,6 +2969,28 @@ class SimpleMenuWithRepeater {
   ];
 }
 
+@Component({
+  template: `
+    <button [matMenuTriggerFor]="menu">Toggle menu</button>
+    <mat-menu #menu="matMenu">
+      @for (item of items; track $index) {
+        <button [disabled]="item.disabled" mat-menu-item [disabledInteractive]="true">{{item.label}}</button>
+      }
+    </mat-menu>
+  `,
+  standalone: false,
+})
+class SimpleMenuWithRepeaterAndDisabledInteractive {
+  @ViewChild(MatMenuTrigger) trigger: MatMenuTrigger;
+  @ViewChild(MatMenu) menu: MatMenu;
+  @ViewChildren(MatMenuItem) itemInstances: QueryList<MatMenuItem>;
+
+  items = [
+    {label: 'Pizza', disabled: false},
+    {label: 'Pasta', disabled: true},
+  ];
+}
+
 @Component({
   template: `
     <button [matMenuTriggerFor]="menu">Toggle menu</button>