From d7d2b16fa0344f3b90989458eb0d07bbdfcfd7d9 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Wed, 29 Mar 2017 20:12:55 +0200 Subject: [PATCH] fix(dialog): delay focus until animation is done (#3774) Delays focusing the first tabbable element in a dialog until animation is done. This prevents issues where other components (e.g. autocomplete) may have a wrong position on load, because they measured dialog while it was animating. Note on lack of tests: This is kind of hard to test, because we don't have much control over how the animations runs. Fixes #3722. --- src/lib/dialog/dialog-container.ts | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/src/lib/dialog/dialog-container.ts b/src/lib/dialog/dialog-container.ts index 82f0185611fd..57c1c0850d97 100644 --- a/src/lib/dialog/dialog-container.ts +++ b/src/lib/dialog/dialog-container.ts @@ -91,9 +91,7 @@ export class MdDialogContainer extends BasePortalHost implements OnDestroy { throw new MdDialogContentAlreadyAttachedError(); } - let attachResult = this._portalHost.attachComponentPortal(portal); - this._trapFocus(); - return attachResult; + return this._portalHost.attachComponentPortal(portal); } /** @@ -105,9 +103,7 @@ export class MdDialogContainer extends BasePortalHost implements OnDestroy { throw new MdDialogContentAlreadyAttachedError(); } - let attachedResult = this._portalHost.attachTemplatePortal(portal); - this._trapFocus(); - return attachedResult; + return this._portalHost.attachTemplatePortal(portal); } /** @@ -142,6 +138,10 @@ export class MdDialogContainer extends BasePortalHost implements OnDestroy { * @docs-private */ _onAnimationDone(event: AnimationEvent) { + if (event.toState === 'enter') { + this._trapFocus(); + } + this._onAnimationStateChange.emit(event.toState as MdDialogContainerAnimationState); } @@ -162,6 +162,8 @@ export class MdDialogContainer extends BasePortalHost implements OnDestroy { this._onAnimationStateChange.complete(); }); - this._focusTrap.destroy(); + if (this._focusTrap) { + this._focusTrap.destroy(); + } } }