fix(cdk/menu): prevent default selection key actions (#26051)

Fixes that the CDK menu wasn't calling `preventDefault` on the enter key presses which caused it to immediately close, because it would allow the click handler to fire as well.

Fixes #26033.

(cherry picked from commit 02ab0a2)

Author: crisbeto

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

@@ -1,6 +1,8 @@
 import {Component, Type, ElementRef} from '@angular/core';
 import {ComponentFixture, TestBed, waitForAsync} from '@angular/core/testing';
+import {dispatchKeyboardEvent} from '@angular/cdk/testing/private';
 import {By} from '@angular/platform-browser';
+import {ENTER} from '@angular/cdk/keycodes';
 import {CdkMenuModule} from './menu-module';
 import {CdkMenuItem} from './menu-item';
 import {CDK_MENU} from './menu-interface';
@@ -43,7 +45,7 @@ describe('MenuItem', () => {
     });
 
     it('should coerce the disabled property', () => {
-      (menuItem as any).disabled = '';
+      menuItem.disabled = '';
       expect(menuItem.disabled).toBeTrue();
     });
 
@@ -64,6 +66,12 @@ describe('MenuItem', () => {
     it('should not have a menu', () => {
       expect(menuItem.hasMenu).toBeFalse();
     });
+
+    it('should prevent the default selection key action', () => {
+      const event = dispatchKeyboardEvent(nativeButton, 'keydown', ENTER);
+      fixture.detectChanges();
+      expect(event.defaultPrevented).toBe(true);
+    });
   });
 
   describe('with complex inner elements', () => {

src/cdk/menu/menu-item.ts

@@ -198,6 +198,7 @@ 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;

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

@@ -2,7 +2,7 @@ import {Component, ViewChildren, QueryList, ElementRef, ViewChild, Type} from '@
 import {ComponentFixture, TestBed, waitForAsync} from '@angular/core/testing';
 import {By} from '@angular/platform-browser';
 import {dispatchKeyboardEvent} from '../../cdk/testing/private';
-import {TAB, SPACE} from '@angular/cdk/keycodes';
+import {TAB, SPACE, ENTER} from '@angular/cdk/keycodes';
 import {CdkMenuModule} from './menu-module';
 import {CdkMenuItem} from './menu-item';
 import {CdkMenu} from './menu';
@@ -425,13 +425,15 @@ describe('MenuTrigger', () => {
     });
 
     it('should toggle the menu on keyboard events', () => {
-      dispatchKeyboardEvent(nativeTrigger, 'keydown', SPACE);
+      const firstEvent = dispatchKeyboardEvent(nativeTrigger, 'keydown', ENTER);
       detectChanges();
+      expect(firstEvent.defaultPrevented).toBe(true);
       expect(nativeMenus.length).toBe(2);
 
-      dispatchKeyboardEvent(nativeTrigger, 'keydown', SPACE);
+      const secondEvent = dispatchKeyboardEvent(nativeTrigger, 'keydown', ENTER);
       detectChanges();
       expect(nativeMenus.length).toBe(1);
+      expect(secondEvent.defaultPrevented).toBe(true);
     });
 
     it('should close the open menu on background click', () => {

src/cdk/menu/menu-trigger.ts

@@ -131,11 +131,11 @@ export class CdkMenuTrigger extends CdkMenuTriggerBase implements OnDestroy {
    */
   _toggleOnKeydown(event: KeyboardEvent) {
     const isParentVertical = this._parentMenu?.orientation === 'vertical';
-    const keyCode = event.keyCode;
-    switch (keyCode) {
+    switch (event.keyCode) {
       case SPACE:
       case ENTER:
         if (!hasModifierKey(event)) {
+          event.preventDefault();
           this.toggle();
           this.childMenu?.focusFirstItem('keyboard');
         }
@@ -167,7 +167,7 @@ export class CdkMenuTrigger extends CdkMenuTriggerBase implements OnDestroy {
           if (!isParentVertical) {
             event.preventDefault();
             this.open();
-            keyCode === DOWN_ARROW
+            event.keyCode === DOWN_ARROW
               ? this.childMenu?.focusFirstItem('keyboard')
               : this.childMenu?.focusLastItem('keyboard');
           }