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.

Author: crisbeto

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();
+    }
   }
 }