From 0ce0c019154c11d809233b35a680882c1421ce87 Mon Sep 17 00:00:00 2001 From: crisbeto Date: Mon, 1 Jul 2019 22:10:11 +0200 Subject: [PATCH] fix(bottom-sheet): not moving focus to container if autoFocus is disabled and focus was moved while animating These changes incorporate #16297 and #16221 into the bottom sheet since it follows a similar focus capturing behavior to `MatDialogContainer`. They ensure that focus is on the bottom sheet container when the animation is over, because it could've moved while we were animating. It also has an extra check to ensure that we don't move focus unnecessarily if the consumer decided to move focus themselves somewhere within the bottom sheet. --- .../bottom-sheet/bottom-sheet-container.ts | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) 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(); + } } }