diff --git a/src/material/menu/menu-trigger.ts b/src/material/menu/menu-trigger.ts index a0c0afc187e2..d7f85f2a22d1 100644 --- a/src/material/menu/menu-trigger.ts +++ b/src/material/menu/menu-trigger.ts @@ -412,11 +412,11 @@ export class MatMenuTrigger implements AfterContentInit, OnDestroy { config.positionStrategy as FlexibleConnectedPositionStrategy, ); this._overlayRef = this._overlay.create(config); - - // Consume the `keydownEvents` in order to prevent them from going to another overlay. - // Ideally we'd also have our keyboard event logic in here, however doing so will - // break anybody that may have implemented the `MatMenuPanel` themselves. - this._overlayRef.keydownEvents().subscribe(); + this._overlayRef.keydownEvents().subscribe(event => { + if (this.menu instanceof MatMenu) { + this.menu._handleKeydown(event); + } + }); } return this._overlayRef; diff --git a/src/material/menu/menu.html b/src/material/menu/menu.html index 77f78f1d71b6..1c77f023b8b7 100644 --- a/src/material/menu/menu.html +++ b/src/material/menu/menu.html @@ -3,7 +3,6 @@ class="mat-mdc-menu-panel" [id]="panelId" [class]="_classList" - (keydown)="_handleKeydown($event)" (click)="closed.emit('click')" [@transformMenu]="_panelAnimationState" (@transformMenu.start)="_onAnimationStart($event)" diff --git a/src/material/menu/menu.spec.ts b/src/material/menu/menu.spec.ts index 8de50ba1cadd..fc7de98f0928 100644 --- a/src/material/menu/menu.spec.ts +++ b/src/material/menu/menu.spec.ts @@ -473,16 +473,13 @@ describe('MatMenu', () => { fixture.componentInstance.trigger.openMenu(); const panel = overlayContainerElement.querySelector('.mat-mdc-menu-panel')!; - const event = createKeyboardEvent('keydown', ESCAPE); - spyOn(event, 'stopPropagation').and.callThrough(); + const event = dispatchKeyboardEvent(panel, 'keydown', ESCAPE); - dispatchEvent(panel, event); fixture.detectChanges(); tick(500); expect(overlayContainerElement.textContent).toBe(''); expect(event.defaultPrevented).toBe(true); - expect(event.stopPropagation).toHaveBeenCalled(); })); it('should not close the menu when pressing ESCAPE with a modifier', fakeAsync(() => { diff --git a/src/material/menu/menu.ts b/src/material/menu/menu.ts index 809fe23c440c..e3ae2558567e 100644 --- a/src/material/menu/menu.ts +++ b/src/material/menu/menu.ts @@ -385,10 +385,6 @@ export class MatMenu implements AfterContentInit, MatMenuPanel, OnI manager.onKeydown(event); return; } - - // Don't allow the event to propagate if we've already handled it, or it may - // end up reaching other overlays that were opened earlier (see #22694). - event.stopPropagation(); } /** diff --git a/src/material/menu/testing/menu-harness.ts b/src/material/menu/testing/menu-harness.ts index 890ad26bcd0d..753aa8c676f9 100644 --- a/src/material/menu/testing/menu-harness.ts +++ b/src/material/menu/testing/menu-harness.ts @@ -12,7 +12,6 @@ import { HarnessLoader, HarnessPredicate, TestElement, - TestKey, } from '@angular/cdk/testing'; import {coerceBooleanProperty} from '@angular/cdk/coercion'; import {MenuHarnessFilters, MenuItemHarnessFilters} from './menu-harness-filters'; @@ -82,7 +81,7 @@ export class MatMenuHarness extends ContentContainerComponentHarness { async close(): Promise { const panel = await this._getMenuPanel(); if (panel) { - return panel.sendKeys(TestKey.ESCAPE); + return panel.click(); } }