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 #29984

Author: mistrykaran91

Diff for: 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>;
 }

Diff for: src/dev-app/menu/BUILD.bazel

@@ -13,10 +13,12 @@ ng_project(
     deps = [
         "//:node_modules/@angular/core",
         "//src/material/button",
+        "//src/material/checkbox",
         "//src/material/divider",
         "//src/material/icon",
         "//src/material/menu",
         "//src/material/toolbar",
+        "//src/material/tooltip",
     ],
 )
 

Diff for: 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>

Diff for: 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'},
   ];
 

Diff for: src/material/menu/_m2-menu.scss

@@ -20,26 +20,31 @@ $prefix: (mat, menu);
     item-with-icon-leading-spacing: 16px,
     item-with-icon-trailing-spacing: 16px,
     container-elevation-shadow: elevation.get-box-shadow(8),
-
     // Unused
-    base-elevation-level: null,
+    base-elevation-level: null
   );
 }
 
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
   $is-dark: inspection.get-theme-type($theme) == dark;
-  $active-state-layer-color: inspection.get-theme-color($theme, foreground, base,
-    if($is-dark, 0.08, 0.04));
+  $active-state-layer-color: inspection.get-theme-color(
+    $theme,
+    foreground,
+    base,
+    if($is-dark, 0.08, 0.04)
+  );
+  $disabled-background: inspection.get-theme-color($theme, foreground, disabled-button);
   $text-color: inspection.get-theme-color($theme, foreground, text);
 
   @return (
     item-label-text-color: $text-color,
     item-icon-color: $text-color,
     item-hover-state-layer-color: $active-state-layer-color,
+    item-disabled-hover-state-layer-color: $disabled-background,
     item-focus-state-layer-color: $active-state-layer-color,
     container-color: inspection.get-theme-color($theme, background, card),
-    divider-color: inspection.get-theme-color($theme, foreground, divider),
+    divider-color: inspection.get-theme-color($theme, foreground, divider)
   );
 }
 
@@ -50,7 +55,7 @@ $prefix: (mat, menu);
     item-label-text-size: inspection.get-theme-typography($theme, body-1, font-size),
     item-label-text-tracking: inspection.get-theme-typography($theme, body-1, letter-spacing),
     item-label-text-line-height: inspection.get-theme-typography($theme, body-1, line-height),
-    item-label-text-weight: inspection.get-theme-typography($theme, body-1, font-weight),
+    item-label-text-weight: inspection.get-theme-typography($theme, body-1, font-weight)
   );
 }
 
@@ -63,9 +68,9 @@ $prefix: (mat, menu);
 // This is used to create token slots.
 @function get-token-slots() {
   @return sass-utils.deep-merge-all(
-      get-unthemable-tokens(),
-      get-color-tokens(m2-utils.$placeholder-color-config),
-      get-typography-tokens(m2-utils.$placeholder-typography-config),
-      get-density-tokens(m2-utils.$placeholder-density-config)
+    get-unthemable-tokens(),
+    get-color-tokens(m2-utils.$placeholder-color-config),
+    get-typography-tokens(m2-utils.$placeholder-typography-config),
+    get-density-tokens(m2-utils.$placeholder-density-config)
   );
 }

Diff for: src/material/menu/_m3-menu.scss

@@ -23,21 +23,27 @@ $prefix: (mat, menu);
       item-icon-color: map.get($systems, md-sys-color, on-surface-variant),
       item-icon-size: m3-utils.hardcode(24px, $exclude-hardcoded),
       item-hover-state-layer-color: sass-utils.safe-color-change(
-        map.get($systems, md-sys-color, on-surface),
-        $alpha: map.get($systems, md-sys-state, hover-state-layer-opacity)
-      ),
+          map.get($systems, md-sys-color, on-surface),
+          $alpha: map.get($systems, md-sys-state, hover-state-layer-opacity)
+        ),
+      item-disabled-hover-state-layer-color: sass-utils.safe-color-change(
+          map.get($systems, md-sys-color, n-surface),
+          $alpha: 0.38
+        ),
       item-focus-state-layer-color: sass-utils.safe-color-change(
-        map.get($systems, md-sys-color, on-surface),
-        $alpha: map.get($systems, md-sys-state, focus-state-layer-opacity)
-      ),
+          map.get($systems, md-sys-color, on-surface),
+          $alpha: map.get($systems, md-sys-state, focus-state-layer-opacity)
+        ),
       item-spacing: m3-utils.hardcode(12px, $exclude-hardcoded),
       item-leading-spacing: m3-utils.hardcode(12px, $exclude-hardcoded),
       item-trailing-spacing: m3-utils.hardcode(12px, $exclude-hardcoded),
       item-with-icon-leading-spacing: m3-utils.hardcode(12px, $exclude-hardcoded),
       item-with-icon-trailing-spacing: m3-utils.hardcode(12px, $exclude-hardcoded),
       container-color: map.get($systems, md-sys-color, surface-container),
       container-elevation-shadow: m3-utils.hardcode(
-        elevation.get-box-shadow(2), $exclude-hardcoded),
+          elevation.get-box-shadow(2),
+          $exclude-hardcoded
+        ),
     )
   );
 

Diff for: 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;
     }
   }