feat(cdk/menu): Allow setting cdkMenuTriggerFor null

src/cdk/menu/menu-item.ts

@@ -93,7 +93,13 @@ export class CdkMenuItem implements FocusableOption, FocusableElement, Toggler,
   @Output('cdkMenuItemTriggered') readonly triggered: EventEmitter<void> = new EventEmitter();
 
   /** Whether the menu item opens a menu. */
-  readonly hasMenu = !!this._menuTrigger;
+  get hasMenu() {
+    if (this._menuTrigger?.menuTemplateRef == null) {
+      return false;
+    }
+
+    return true;
+  }
 
   /**
    * The tabindex for this menu item managed internally and used for implementing roving a

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

@@ -58,7 +58,7 @@ export abstract class CdkMenuTriggerBase implements OnDestroy {
   readonly closed: EventEmitter<void> = new EventEmitter();
 
   /** Template reference variable to the menu this trigger opens */
-  menuTemplateRef: TemplateRef<unknown>;
+  menuTemplateRef: TemplateRef<unknown> | null;
 
   /** Context data to be passed along to the menu template */
   menuData: unknown;

src/cdk/menu/menu-trigger.spec.ts

@@ -1,3 +1,4 @@
+import {CdkContextMenuTrigger} from './context-menu-trigger';
 import {Component, ViewChildren, QueryList, ElementRef, ViewChild, Type} from '@angular/core';
 import {ComponentFixture, TestBed, waitForAsync} from '@angular/core/testing';
 import {By} from '@angular/platform-browser';
@@ -47,12 +48,36 @@ describe('MenuTrigger', () => {
       expect(menuItemElement.getAttribute('aria-disabled')).toBe('true');
     });
 
-    it('should set aria-haspopup to menu', () => {
+    it('should set aria-haspopup based on whether a menu is assigned', () => {
       expect(menuItemElement.getAttribute('aria-haspopup')).toEqual('menu');
+
+      fixture.componentInstance.trigger.menuTemplateRef = null;
+      fixture.detectChanges();
+
+      expect(menuItemElement.hasAttribute('aria-haspopup')).toBe(false);
     });
 
-    it('should  have a menu', () => {
+    it('should have a menu based on whether a menu is assigned', () => {
       expect(menuItem.hasMenu).toBeTrue();
+
+      fixture.componentInstance.trigger.menuTemplateRef = null;
+      fixture.detectChanges();
+
+      expect(menuItem.hasMenu).toBeFalse();
+    });
+
+    it('should set aria-controls based on whether a menu is assigned', () => {
+      expect(menuItemElement.hasAttribute('aria-controls')).toBeFalse();
+    });
+
+    it('should set aria-expanded based on whether a menu is assigned', () => {
+        expect(menuItemElement.hasAttribute('aria-expanded')).toBeTrue();
+        expect(menuItemElement.getAttribute('aria-expanded')).toBe('false');
+
+        fixture.componentInstance.trigger.menuTemplateRef = null;
+        fixture.detectChanges();
+
+        expect(menuItemElement.hasAttribute('aria-expanded')).toBeFalse();
     });
   });
 
@@ -469,6 +494,50 @@ describe('MenuTrigger', () => {
 
     expect(document.querySelector('.test-menu')?.textContent).toBe('Hello!');
   });
+
+  xdescribe('null triggerFor', () => {
+    let fixture: ComponentFixture<TriggerWithNullValue>;
+
+    let nativeTrigger: HTMLElement;
+
+    beforeEach(waitForAsync(() => {
+      TestBed.configureTestingModule({
+        imports: [CdkMenuModule],
+        declarations: [TriggerWithNullValue],
+      }).compileComponents();
+    }));
+
+    beforeEach(() => {
+      fixture = TestBed.createComponent(TriggerWithNullValue);
+      nativeTrigger = fixture.componentInstance.nativeTrigger.nativeElement
+    });
+
+    it('should not set aria-haspopup', () => {
+      expect(nativeTrigger.hasAttribute('aria-haspopup')).toBeFalse();
+    });
+
+    it('should not set aria-controls', () => {
+      expect(nativeTrigger.hasAttribute('aria-controls')).toBeFalse();
+    });
+
+    it('should not toggle the menu on trigger', () => {
+      expect(fixture.componentInstance.trigger.isOpen()).toBeFalse();
+
+      nativeTrigger.click();
+      fixture.detectChanges();
+
+      expect(fixture.componentInstance.trigger.isOpen()).toBeFalse();
+    });
+
+    it('should not toggle the menu on keyboard events', () => {
+      expect(fixture.componentInstance.trigger.isOpen()).toBeFalse();
+
+      dispatchKeyboardEvent(nativeTrigger, 'keydown', SPACE);
+      fixture.detectChanges();
+
+      expect(fixture.componentInstance.trigger.isOpen()).toBeFalse();
+    });
+  });
 });
 
 @Component({
@@ -477,7 +546,10 @@ describe('MenuTrigger', () => {
     <ng-template #noop><div cdkMenu></div></ng-template>
   `,
 })
-class TriggerForEmptyMenu {}
+class TriggerForEmptyMenu {
+    @ViewChild(CdkMenuTrigger) trigger: CdkMenuTrigger;
+    @ViewChild(CdkMenuTrigger, { read: ElementRef }) nativeTrigger: ElementRef;
+}
 
 @Component({
   template: `
@@ -602,3 +674,20 @@ class StandaloneTriggerWithInlineMenu {
 class TriggerWithData {
   menuData: unknown;
 }
+
+@Component({
+  template: `
+    <button [cdkMenuTriggerFor]="null">First</button>
+    <button [cdkContextMenuTriggerFor]="null">First</button>
+  `,
+})
+class TriggerWithNullValue {
+  @ViewChild(CdkMenuTrigger)
+  trigger: CdkMenuTrigger;
+
+  @ViewChild(CdkMenuTrigger, {read: ElementRef})
+  nativeTrigger: ElementRef<HTMLElement>;
+
+  @ViewChild(CdkContextMenuTrigger, {read: ElementRef})
+  contextMenuNativeTrigger: ElementRef<HTMLElement>;
+}

src/cdk/menu/menu-trigger.ts

@@ -45,8 +45,8 @@ import {CdkMenuTriggerBase, MENU_TRIGGER} from './menu-trigger-base';
   standalone: true,
   host: {
     'class': 'cdk-menu-trigger',
-    'aria-haspopup': 'menu',
-    '[attr.aria-expanded]': 'isOpen()',
+    '[attr.aria-haspopup]': 'menuTemplateRef ? "menu" : null',
+    '[attr.aria-expanded]': 'menuTemplateRef == null ? null : isOpen()',
     '(focusin)': '_setHasFocus(true)',
     '(focusout)': '_setHasFocus(false)',
     '(keydown)': '_toggleOnKeydown($event)',
@@ -99,7 +99,7 @@ export class CdkMenuTrigger extends CdkMenuTriggerBase implements OnDestroy {
 
   /** Open the attached menu. */
   open() {
-    if (!this.isOpen()) {
+    if (!this.isOpen() && this.menuTemplateRef != null) {
       this.opened.next();
 
       this.overlayRef = this.overlayRef || this._overlay.create(this._getOverlayConfig());