Skip to content

Commit aeecb3c

Browse files
authored
fix(material/menu): not interrupting keyboard events to other overlays (#22856)
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 d185294 commit aeecb3c

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
@@ -437,12 +437,14 @@ describe('MDC-based MatMenu', () => {
437437
const panel = overlayContainerElement.querySelector('.mat-mdc-menu-panel')!;
438438
const event = createKeyboardEvent('keydown', ESCAPE);
439439

440+
spyOn(event, 'stopPropagation').and.callThrough();
440441
dispatchEvent(panel, event);
441442
fixture.detectChanges();
442443
tick(500);
443444

444445
expect(overlayContainerElement.textContent).toBe('');
445446
expect(event.defaultPrevented).toBe(true);
447+
expect(event.stopPropagation).toHaveBeenCalled();
446448
}));
447449

448450
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
@@ -436,13 +436,15 @@ describe('MatMenu', () => {
436436

437437
const panel = overlayContainerElement.querySelector('.mat-menu-panel')!;
438438
const event = createKeyboardEvent('keydown', ESCAPE);
439+
spyOn(event, 'stopPropagation').and.callThrough();
439440

440441
dispatchEvent(panel, event);
441442
fixture.detectChanges();
442443
tick(500);
443444

444445
expect(overlayContainerElement.textContent).toBe('');
445446
expect(event.defaultPrevented).toBe(true);
447+
expect(event.stopPropagation).toHaveBeenCalled();
446448
}));
447449

448450
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
@@ -337,7 +337,12 @@ export class _MatMenuBase implements AfterContentInit, MatMenuPanel<MatMenuItem>
337337
}
338338

339339
manager.onKeydown(event);
340+
return;
340341
}
342+
343+
// Don't allow the event to propagate if we've already handled it, or it may
344+
// end up reaching other overlays that were opened earlier (see #22694).
345+
event.stopPropagation();
341346
}
342347

343348
/**

0 commit comments

Comments
 (0)