From d88e04f2a82083f41e5d43bb4aebedd433d5daae Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@abv.bg>
Date: Wed, 9 Jun 2021 07:14:30 +0200
Subject: [PATCH] fix(material/menu): not interrupting keyboard events to other
 overlays

This is a resubmit of #22856 which had some issues in g3.

For historical reasons, `mat-menu` doesn't use the same keyboard event dispatcher as the other overlays. To work around it, previously we added a dummy subscription so that the menu would still show up in the overlay keyboard stack.

This works for most events, but it breaks down for the escape key, because closing the menu removes it from the stack immediately, allowing the event to bubble up to the document and be dispatched to the next overlay in the stack.

These changes resolve the issue by adding a stopPropagation call.

Fixes #22694.
---
 src/material-experimental/mdc-menu/menu.spec.ts | 2 ++
 src/material/menu/menu.spec.ts                  | 2 ++
 src/material/menu/menu.ts                       | 5 +++++
 3 files changed, 9 insertions(+)

diff --git a/src/material-experimental/mdc-menu/menu.spec.ts b/src/material-experimental/mdc-menu/menu.spec.ts
index d310f46000f8..84f57591c88a 100644
--- a/src/material-experimental/mdc-menu/menu.spec.ts
+++ b/src/material-experimental/mdc-menu/menu.spec.ts
@@ -439,6 +439,7 @@ describe('MDC-based MatMenu', () => {
 
     const panel = overlayContainerElement.querySelector('.mat-mdc-menu-panel')!;
     const event = createKeyboardEvent('keydown', ESCAPE);
+    spyOn(event, 'stopPropagation').and.callThrough();
 
     dispatchEvent(panel, event);
     fixture.detectChanges();
@@ -446,6 +447,7 @@ describe('MDC-based MatMenu', () => {
 
     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.spec.ts b/src/material/menu/menu.spec.ts
index cb5c593dbc9b..4c9d4c32be18 100644
--- a/src/material/menu/menu.spec.ts
+++ b/src/material/menu/menu.spec.ts
@@ -440,6 +440,7 @@ describe('MatMenu', () => {
 
     const panel = overlayContainerElement.querySelector('.mat-menu-panel')!;
     const event = createKeyboardEvent('keydown', ESCAPE);
+    spyOn(event, 'stopPropagation').and.callThrough();
 
     dispatchEvent(panel, event);
     fixture.detectChanges();
@@ -447,6 +448,7 @@ describe('MatMenu', () => {
 
     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 85a1d9a034f6..9068383c6ee3 100644
--- a/src/material/menu/menu.ts
+++ b/src/material/menu/menu.ts
@@ -337,7 +337,12 @@ export class _MatMenuBase implements AfterContentInit, MatMenuPanel<MatMenuItem>
         }
 
         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();
   }
 
   /**