diff --git a/src/material/dialog/dialog-container.ts b/src/material/dialog/dialog-container.ts index a13c984533ba..bada9edc1d39 100644 --- a/src/material/dialog/dialog-container.ts +++ b/src/material/dialog/dialog-container.ts @@ -151,9 +151,9 @@ export class MatDialogContainer extends BasePortalOutlet { /** Moves focus back into the dialog if it was moved out. */ _recaptureFocus() { if (!this._containsFocus()) { - const focusWasTrapped = this._focusTrap.focusInitialElement(); + const focusContainer = !this._config.autoFocus || !this._focusTrap.focusInitialElement(); - if (!focusWasTrapped) { + if (focusContainer) { this._elementRef.nativeElement.focus(); } } diff --git a/src/material/dialog/dialog.spec.ts b/src/material/dialog/dialog.spec.ts index fa4a2b948ad5..563e424331c9 100644 --- a/src/material/dialog/dialog.spec.ts +++ b/src/material/dialog/dialog.spec.ts @@ -983,6 +983,33 @@ describe('MatDialog', () => { expect(document.activeElement).toBe(input, 'Expected input to stay focused after click'); })); + it('should recapture focus to the container when clicking on the backdrop with ' + + 'autoFocus disabled', fakeAsync(() => { + dialog.open(PizzaMsg, { + disableClose: true, + viewContainerRef: testViewContainerRef, + autoFocus: false + }); + + viewContainerFixture.detectChanges(); + flushMicrotasks(); + + let backdrop = + overlayContainerElement.querySelector('.cdk-overlay-backdrop') as HTMLElement; + let container = + overlayContainerElement.querySelector('.mat-dialog-container') as HTMLInputElement; + + expect(document.activeElement).toBe(container, 'Expected container to be focused on open'); + + container.blur(); // Programmatic clicks might not move focus so we simulate it. + backdrop.click(); + viewContainerFixture.detectChanges(); + flush(); + + expect(document.activeElement) + .toBe(container, 'Expected container to stay focused after click'); + })); + }); describe('hasBackdrop option', () => {