diff --git a/src/material/bottom-sheet/bottom-sheet-container.ts b/src/material/bottom-sheet/bottom-sheet-container.ts index ee815a814b7f..cccd61b53686 100644 --- a/src/material/bottom-sheet/bottom-sheet-container.ts +++ b/src/material/bottom-sheet/bottom-sheet-container.ts @@ -180,15 +180,27 @@ export class MatBottomSheetContainer extends BasePortalOutlet implements OnDestr } } - /** Moves the focus inside the focus trap. */ private _trapFocus() { + const element = this._elementRef.nativeElement; + if (!this._focusTrap) { - this._focusTrap = this._focusTrapFactory.create(this._elementRef.nativeElement); + this._focusTrap = this._focusTrapFactory.create(element); } if (this.bottomSheetConfig.autoFocus) { this._focusTrap.focusInitialElementWhenReady(); + } else { + const activeElement = this._document.activeElement; + + // Otherwise ensure that focus is on the container. It's possible that a different + // component tried to move focus while the open animation was running. See: + // https://github.com/angular/components/issues/16215. Note that we only want to do this + // if the focus isn't inside the bottom sheet already, because it's possible that the + // consumer turned off `autoFocus` in order to move focus themselves. + if (activeElement !== element && !element.contains(activeElement)) { + element.focus(); + } } }