From 2e047b4873f508f1aa51137d0a0f0e4aff39f695 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Wed, 12 Jun 2019 00:05:36 +0200 Subject: [PATCH] fix(dialog): not moving focus to container if autoFocus is disabled and focus was moved from a different component (#16221) Given an example where we have a `mat-menu` that opens a dialog with `autoFocus = false`, the user's focus will end up on the menu's trigger, rather than the dialog container. This is due to the fact that we move focus to the dialog container immediately when the opening sequence starts and we assume that it's going to stay there. This isn't a problem when `autoFocus` is enabled, because we also try to move focus once the animation is done. These changes add an extra call after the animation finishes to ensure that the container has focus. Fixes #16215. --- src/material/dialog/dialog-container.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/material/dialog/dialog-container.ts b/src/material/dialog/dialog-container.ts index 7a80ee3a5e3..a1d6d7de7e4 100644 --- a/src/material/dialog/dialog-container.ts +++ b/src/material/dialog/dialog-container.ts @@ -141,6 +141,11 @@ export class MatDialogContainer extends BasePortalOutlet { // wait for the microtask queue to be empty. if (this._config.autoFocus) { this._focusTrap.focusInitialElementWhenReady(); + } else { + // Otherwise ensure that focus is on the dialog 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 + this._elementRef.nativeElement.focus(); } }