Skip to content

Commit 864b8ae

Browse files
authored
fix(material/menu): not interrupting keyboard events to other overlays (#23310)
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.
1 parent b9a3908 commit 864b8ae

File tree

3 files changed

+9
-0
lines changed

3 files changed

+9
-0
lines changed

src/material-experimental/mdc-menu/menu.spec.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -428,13 +428,15 @@ describe('MDC-based MatMenu', () => {
428428

429429
const panel = overlayContainerElement.querySelector('.mat-mdc-menu-panel')!;
430430
const event = createKeyboardEvent('keydown', ESCAPE);
431+
spyOn(event, 'stopPropagation').and.callThrough();
431432

432433
dispatchEvent(panel, event);
433434
fixture.detectChanges();
434435
tick(500);
435436

436437
expect(overlayContainerElement.textContent).toBe('');
437438
expect(event.defaultPrevented).toBe(true);
439+
expect(event.stopPropagation).toHaveBeenCalled();
438440
}));
439441

440442
it('should not close the menu when pressing ESCAPE with a modifier', fakeAsync(() => {

src/material/menu/menu.spec.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -428,13 +428,15 @@ describe('MatMenu', () => {
428428

429429
const panel = overlayContainerElement.querySelector('.mat-menu-panel')!;
430430
const event = createKeyboardEvent('keydown', ESCAPE);
431+
spyOn(event, 'stopPropagation').and.callThrough();
431432

432433
dispatchEvent(panel, event);
433434
fixture.detectChanges();
434435
tick(500);
435436

436437
expect(overlayContainerElement.textContent).toBe('');
437438
expect(event.defaultPrevented).toBe(true);
439+
expect(event.stopPropagation).toHaveBeenCalled();
438440
}));
439441

440442
it('should not close the menu when pressing ESCAPE with a modifier', fakeAsync(() => {

src/material/menu/menu.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -357,7 +357,12 @@ export class _MatMenuBase
357357
}
358358

359359
manager.onKeydown(event);
360+
return;
360361
}
362+
363+
// Don't allow the event to propagate if we've already handled it, or it may
364+
// end up reaching other overlays that were opened earlier (see #22694).
365+
event.stopPropagation();
361366
}
362367

363368
/**

0 commit comments

Comments
 (0)