diff --git a/src/lib/bottom-sheet/bottom-sheet-container.ts b/src/lib/bottom-sheet/bottom-sheet-container.ts index 8056ee5957f2..22848aa70b5e 100644 --- a/src/lib/bottom-sheet/bottom-sheet-container.ts +++ b/src/lib/bottom-sheet/bottom-sheet-container.ts @@ -146,7 +146,7 @@ export class MatBottomSheetContainer extends BasePortalOutlet implements OnDestr _onAnimationDone(event: AnimationEvent) { if (event.toState === 'hidden') { this._restoreFocus(); - } else if (event.toState === 'visible' && this.bottomSheetConfig.autoFocus) { + } else if (event.toState === 'visible') { this._trapFocus(); } @@ -187,7 +187,9 @@ export class MatBottomSheetContainer extends BasePortalOutlet implements OnDestr this._focusTrap = this._focusTrapFactory.create(this._elementRef.nativeElement); } - this._focusTrap.focusInitialElementWhenReady(); + if (this.bottomSheetConfig.autoFocus) { + this._focusTrap.focusInitialElementWhenReady(); + } } /** Restores focus to the element that was focused before the bottom sheet was opened. */ diff --git a/src/lib/bottom-sheet/bottom-sheet.spec.ts b/src/lib/bottom-sheet/bottom-sheet.spec.ts index 1ad501c6bc97..e5e9c8bebc6b 100644 --- a/src/lib/bottom-sheet/bottom-sheet.spec.ts +++ b/src/lib/bottom-sheet/bottom-sheet.spec.ts @@ -547,6 +547,20 @@ describe('MatBottomSheet', () => { 'Expected bottom sheet container to be focused.'); })); + it('should create a focus trap if autoFocus is disabled', fakeAsync(() => { + bottomSheet.open(PizzaMsg, { + viewContainerRef: testViewContainerRef, + autoFocus: false + }); + + viewContainerFixture.detectChanges(); + flushMicrotasks(); + + const focusTrapAnchors = overlayContainerElement.querySelectorAll('.cdk-focus-trap-anchor'); + + expect(focusTrapAnchors.length).toBeGreaterThan(0); + })); + it('should focus the first tabbable element of the bottom sheet on open when' + 'autoFocus is enabled', fakeAsync(() => { bottomSheet.open(PizzaMsg, {