Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 15 additions & 6 deletions src/lib/menu/menu-trigger.ts
Original file line number Diff line number Diff line change
Expand Up @@ -137,6 +137,13 @@ export class MatMenuTrigger implements AfterContentInit, OnDestroy {
/** Data to be passed along to any lazily-rendered content. */
@Input('matMenuTriggerData') menuData: any;

/**
* Whether focus should be restored when the menu is closed.
* Note that disabling this option can have accessibility implications
* and it's up to you to manage focus, if you decide to turn it off.
*/
@Input('matMenuTriggerRestoreFocus') restoreFocus: boolean = true;

/** Event emitted when the associated menu is opened. */
@Output() readonly menuOpened: EventEmitter<void> = new EventEmitter<void>();

Expand Down Expand Up @@ -339,12 +346,14 @@ export class MatMenuTrigger implements AfterContentInit, OnDestroy {
// We should reset focus if the user is navigating using a keyboard or
// if we have a top-level trigger which might cause focus to be lost
// when clicking on the backdrop.
if (!this._openedBy) {
// Note that the focus style will show up both for `program` and
// `keyboard` so we don't have to specify which one it is.
this.focus();
} else if (!this.triggersSubmenu()) {
this.focus(this._openedBy);
if (this.restoreFocus) {
if (!this._openedBy) {
// Note that the focus style will show up both for `program` and
// `keyboard` so we don't have to specify which one it is.
this.focus();
} else if (!this.triggersSubmenu()) {
this.focus(this._openedBy);
}
}

this._openedBy = null;
Expand Down
27 changes: 26 additions & 1 deletion src/lib/menu/menu.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -159,6 +159,27 @@ describe('MatMenu', () => {
expect(document.activeElement).toBe(triggerEl);
}));

it('should not restore focus to the trigger if focus restoration is disabled', fakeAsync(() => {
const fixture = createComponent(SimpleMenu, [], [FakeIcon]);
fixture.detectChanges();
const triggerEl = fixture.componentInstance.triggerEl.nativeElement;

fixture.componentInstance.restoreFocus = false;
fixture.detectChanges();

// A click without a mousedown before it is considered a keyboard open.
triggerEl.click();
fixture.detectChanges();

expect(overlayContainerElement.querySelector('.mat-menu-panel')).toBeTruthy();

fixture.componentInstance.trigger.closeMenu();
fixture.detectChanges();
tick(500);

expect(document.activeElement).not.toBe(triggerEl);
}));

it('should be able to set a custom class on the backdrop', fakeAsync(() => {
const fixture = createComponent(SimpleMenu, [], [FakeIcon]);

Expand Down Expand Up @@ -1878,7 +1899,10 @@ describe('MatMenu default overrides', () => {

@Component({
template: `
<button [matMenuTriggerFor]="menu" #triggerEl>Toggle menu</button>
<button
[matMenuTriggerFor]="menu"
[matMenuTriggerRestoreFocus]="restoreFocus"
#triggerEl>Toggle menu</button>
<mat-menu
#menu="matMenu"
[class]="panelClass"
Expand All @@ -1904,6 +1928,7 @@ class SimpleMenu {
closeCallback = jasmine.createSpy('menu closed callback');
backdropClass: string;
panelClass: string;
restoreFocus = true;
}

@Component({
Expand Down
1 change: 1 addition & 0 deletions tools/public_api_guard/lib/menu.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -112,6 +112,7 @@ export declare class MatMenuTrigger implements AfterContentInit, OnDestroy {
readonly menuOpened: EventEmitter<void>;
readonly onMenuClose: EventEmitter<void>;
readonly onMenuOpen: EventEmitter<void>;
restoreFocus: boolean;
constructor(_overlay: Overlay, _element: ElementRef<HTMLElement>, _viewContainerRef: ViewContainerRef, scrollStrategy: any, _parentMenu: MatMenu, _menuItemInstance: MatMenuItem, _dir: Directionality, _focusMonitor?: FocusMonitor | undefined);
_handleClick(event: MouseEvent): void;
_handleKeydown(event: KeyboardEvent): void;
Expand Down