fix(material/menu): render backdrop for context menu if explicitly opted in

src/material/menu/context-menu-trigger.spec.ts

@@ -1,4 +1,4 @@
-import {Component, signal} from '@angular/core';
+import {Component, signal, ViewChild} from '@angular/core';
 import {ComponentFixture, fakeAsync, flush, TestBed} from '@angular/core/testing';
 import {MatContextMenuTrigger} from './context-menu-trigger';
 import {MatMenu} from './menu';
@@ -16,6 +16,10 @@ describe('context menu trigger', () => {
     return document.querySelector('.mat-mdc-menu-panel');
   }
 
+  function getBackdrop(): HTMLElement | null {
+    return document.querySelector('.cdk-overlay-backdrop');
+  }
+
   beforeEach(() => {
     fixture = TestBed.createComponent(ContextMenuTest);
     fixture.detectChanges();
@@ -157,6 +161,21 @@ describe('context menu trigger', () => {
     fixture.detectChanges();
     expect(getMenu()).toBe(null);
   });
+
+  it('should not create a backdrop for context menu by default', () => {
+    dispatchMouseEvent(getTrigger(), 'contextmenu', 10, 10);
+    fixture.detectChanges();
+    expect(getBackdrop()).toBeFalsy();
+    expect(getMenu()).toBeTruthy();
+  });
+
+  it('should create a backdrop for context menus if the menu explicitly opted into it', () => {
+    fixture.componentInstance.menuInstance.hasBackdrop = true;
+    dispatchMouseEvent(getTrigger(), 'contextmenu', 10, 10);
+    fixture.detectChanges();
+    expect(getBackdrop()).toBeTruthy();
+    expect(getMenu()).toBeTruthy();
+  });
 });
 
 @Component({
@@ -185,6 +204,7 @@ describe('context menu trigger', () => {
   `,
 })
 class ContextMenuTest {
+  @ViewChild(MatMenu) menuInstance!: MatMenu;
   showTrigger = signal(true);
   disabled = signal(false);
   opened = jasmine.createSpy('opened');

src/material/menu/menu-trigger-base.ts

@@ -222,7 +222,7 @@ export abstract class MatMenuTriggerBase implements OnDestroy {
       overlayConfig.hasBackdrop =
         menu.hasBackdrop == null ? !this._triggersSubmenu() : menu.hasBackdrop;
     } else {
-      overlayConfig.hasBackdrop = false;
+      overlayConfig.hasBackdrop = menu.hasBackdrop ?? false;
     }
 
     // We need the `hasAttached` check for the case where the user kicked off a removal animation,

src/material/menu/menu.md

@@ -57,6 +57,10 @@ area and will be closed if the user clicks away.
 You can set up a `mat-menu` as a context menu by adding the `matContextMenuTriggerFor` directive
 to your container and binding it to a menu instance.
 
+Note that by default context menus don't create a backdrop element in order to allow the user to
+right click somewhere else. You can opt into the backdrop by explicitly setting
+`[hasBackdrop]="true"` on the menu.
+
 <!-- example(context-menu) -->
 
 ### Lazy rendering