fix(cdk/menu): don't prevent default enter and space actions (#25591)

Fixes that the CDK menu trigger and menu item were preventing the default action on enter and space key presses. Presumably this was done to avoid form submissions, but it can also prevent anchors from being used as menu items. These changes avoid submissions by setting the `type` attribute on `button` elements.

Fixes #25584.

Author: crisbeto

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

@@ -38,6 +38,10 @@ describe('MenuItem', () => {
       expect(nativeButton.getAttribute('role')).toBe('menuitem');
     });
 
+    it('should a type on the button', () => {
+      expect(nativeButton.getAttribute('type')).toBe('button');
+    });
+
     it('should coerce the disabled property', () => {
       (menuItem as any).disabled = '';
       expect(menuItem.disabled).toBeTrue();

src/cdk/menu/menu-item.ts

@@ -53,7 +53,7 @@ export class CdkMenuItem implements FocusableOption, FocusableElement, Toggler,
   protected readonly _dir = inject(Directionality, InjectFlags.Optional);
 
   /** The menu's native DOM host element. */
-  readonly _elementRef = inject(ElementRef);
+  readonly _elementRef: ElementRef<HTMLElement> = inject(ElementRef);
 
   /** The Angular zone. */
   protected _ngZone = inject(NgZone);
@@ -109,6 +109,7 @@ export class CdkMenuItem implements FocusableOption, FocusableElement, Toggler,
 
   constructor() {
     this._setupMouseEnter();
+    this._setType();
 
     if (this._isStandaloneItem()) {
       this._tabindex = 0;
@@ -197,7 +198,6 @@ export class CdkMenuItem implements FocusableOption, FocusableElement, Toggler,
       case SPACE:
       case ENTER:
         if (!hasModifierKey(event)) {
-          event.preventDefault();
           this.trigger({keepOpen: event.keyCode === SPACE && !this.closeOnSpacebarTrigger});
         }
         break;
@@ -298,4 +298,14 @@ export class CdkMenuItem implements FocusableOption, FocusableElement, Toggler,
   private _isParentVertical() {
     return this._parentMenu?.orientation === 'vertical';
   }
+
+  /** Sets the `type` attribute of the menu item. */
+  private _setType() {
+    const element = this._elementRef.nativeElement;
+
+    if (element.nodeName === 'BUTTON' && !element.getAttribute('type')) {
+      // Prevent form submissions.
+      element.setAttribute('type', 'button');
+    }
+  }
 }

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

@@ -34,6 +34,10 @@ describe('MenuTrigger', () => {
       expect(menuItemElement.getAttribute('role')).toBe('menuitem');
     });
 
+    it('should set a type on the trigger', () => {
+      expect(menuItemElement.getAttribute('type')).toBe('button');
+    });
+
     it('should set the aria disabled attribute', () => {
       expect(menuItemElement.getAttribute('aria-disabled')).toBeNull();
 

src/cdk/menu/menu-trigger.ts

@@ -84,6 +84,7 @@ export class CdkMenuTrigger extends CdkMenuTriggerBase implements OnDestroy {
     this._subscribeToMenuStackClosed();
     this._subscribeToMouseEnter();
     this._subscribeToMenuStackHasFocus();
+    this._setType();
   }
 
   /** Toggle the attached menu. */
@@ -130,7 +131,6 @@ export class CdkMenuTrigger extends CdkMenuTriggerBase implements OnDestroy {
       case SPACE:
       case ENTER:
         if (!hasModifierKey(event)) {
-          event.preventDefault();
           this.toggle();
           this.childMenu?.focusFirstItem('keyboard');
         }
@@ -326,4 +326,14 @@ export class CdkMenuTrigger extends CdkMenuTriggerBase implements OnDestroy {
       this._elementRef.nativeElement.setAttribute('role', 'button');
     }
   }
+
+  /** Sets thte `type` attribute of the trigger. */
+  private _setType() {
+    const element = this._elementRef.nativeElement;
+
+    if (element.nodeName === 'BUTTON' && !element.getAttribute('type')) {
+      // Prevents form submissions.
+      element.setAttribute('type', 'button');
+    }
+  }
 }

tools/public_api_guard/cdk/menu.md

@@ -122,7 +122,7 @@ export class CdkMenuItem implements FocusableOption, FocusableElement, Toggler,
     protected readonly _dir: Directionality | null;
     get disabled(): boolean;
     set disabled(value: BooleanInput);
-    readonly _elementRef: ElementRef<any>;
+    readonly _elementRef: ElementRef<HTMLElement>;
     focus(): void;
     getLabel(): string;
     getMenu(): Menu | undefined;