fix(menu): closing parent overlay when pressing escape (#13442)

Author: crisbeto

src/lib/menu/menu-directive.ts

@@ -262,7 +262,6 @@ export class MatMenu implements AfterContentInit, MatMenuPanel<MatMenuItem>, OnI
     switch (keyCode) {
       case ESCAPE:
         this.closed.emit('keydown');
-        event.stopPropagation();
       break;
       case LEFT_ARROW:
         if (this.parentMenu && this.direction === 'ltr') {

src/lib/menu/menu-trigger.ts

@@ -350,6 +350,11 @@ export class MatMenuTrigger implements AfterContentInit, OnDestroy {
       const config = this._getOverlayConfig();
       this._subscribeToPositions(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();
     }
 
     return this._overlayRef;

src/lib/menu/menu.spec.ts

@@ -254,14 +254,12 @@ describe('MatMenu', () => {
 
     const panel = overlayContainerElement.querySelector('.mat-menu-panel')!;
     const event = createKeyboardEvent('keydown', ESCAPE);
-    const stopPropagationSpy = spyOn(event, 'stopPropagation').and.callThrough();
 
     dispatchEvent(panel, event);
     fixture.detectChanges();
     tick(500);
 
     expect(overlayContainerElement.textContent).toBe('');
-    expect(stopPropagationSpy).toHaveBeenCalled();
   }));
 
   it('should open a custom menu', () => {