wip

Author: jelbourn

src/cdk/overlay/overlay-ref.ts

@@ -11,6 +11,7 @@ import {PortalHost, Portal} from '@angular/cdk/portal';
 import {OverlayState} from './overlay-state';
 import {Observable} from 'rxjs/Observable';
 import {Subject} from 'rxjs/Subject';
+import {first} from 'rxjs/operator/first';
 
 
 /**
@@ -61,6 +62,13 @@ export class OverlayRef implements PortalHost {
       this._state.scrollStrategy.enable();
     }
 
+    // Update the position once the zone is stable so that the overlay will be fully rendered
+    // before attempting to position it, as the position may depend on the size of the rendered
+    // content.
+    first.call(this._ngZone.onStable).subscribe(() => {
+      this.updatePosition();
+    });
+
     // Enable pointer events for the overlay pane element.
     this._togglePointerEvents(true);
 

src/cdk/overlay/overlay.spec.ts

@@ -1,4 +1,4 @@
-import {async, ComponentFixture, inject, TestBed} from '@angular/core/testing';
+import {async, fakeAsync, tick, ComponentFixture, inject, TestBed} from '@angular/core/testing';
 import {Component, NgModule, ViewChild, ViewContainerRef} from '@angular/core';
 import {
   ComponentPortal,
@@ -107,7 +107,7 @@ describe('Overlay', () => {
     expect(overlayContainerElement.textContent).toBe('');
   });
 
-  it('should ensure that the most-recently-attached overlay is on top', () => {
+  it('should ensure that the most-recently-attached overlay is on top', (() => {
     let pizzaOverlayRef = overlay.create();
     let cakeOverlayRef = overlay.create();
 
@@ -130,7 +130,7 @@ describe('Overlay', () => {
         .toBeTruthy('Expected pizza to still be on the bottom.');
     expect(cakeOverlayRef.overlayElement.nextSibling)
         .toBeFalsy('Expected cake to still be on top.');
-  });
+  }));
 
   it('should set the direction', () => {
     const state = new OverlayState({direction: 'rtl'});
@@ -226,13 +226,15 @@ describe('Overlay', () => {
       state = new OverlayState();
     });
 
-    it('should apply the positioning strategy', () => {
+    it('should apply the positioning strategy', fakeAsync(() => {
       state.positionStrategy = new FakePositionStrategy();
 
       overlay.create(state).attach(componentPortal);
+      viewContainerFixture.detectChanges();
+      tick();
 
       expect(overlayContainerElement.querySelectorAll('.fake-positioned').length).toBe(1);
-    });
+    }));
   });
 
   describe('size', () => {

src/cdk/overlay/position/connected-position-strategy.ts

@@ -147,6 +147,11 @@ export class ConnectedPositionStrategy implements PositionStrategy {
    * allows one to re-align the panel without changing the orientation of the panel.
    */
   recalculateLastPosition(): void {
+    // If the overlay had never been positioned before, do nothing.
+    if (!this._lastConnectedPosition) {
+      return;
+    }
+
     const originRect = this._origin.getBoundingClientRect();
     const overlayRect = this._pane.getBoundingClientRect();
     const viewportRect = this._viewportRuler.getViewportRect();

src/lib/autocomplete/autocomplete.spec.ts

@@ -32,7 +32,7 @@ import {Observable} from 'rxjs/Observable';
 import {Subject} from 'rxjs/Subject';
 
 
-describe('MdAutocomplete', () => {
+fdescribe('MdAutocomplete', () => {
   let overlayContainerElement: HTMLElement;
   let dir: Direction;
   let scrolledSubject = new Subject();

src/lib/dialog/dialog-container.ts

@@ -17,6 +17,7 @@ import {
   ChangeDetectorRef,
   ViewChild,
   ViewEncapsulation,
+  ChangeDetectionStrategy,
 } from '@angular/core';
 import {animate, AnimationEvent, state, style, transition, trigger} from '@angular/animations';
 import {DOCUMENT} from '@angular/platform-browser';
@@ -50,6 +51,7 @@ export function throwMdDialogContentAlreadyAttachedError() {
   templateUrl: 'dialog-container.html',
   styleUrls: ['dialog.css'],
   encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
   animations: [
     trigger('slideDialog', [
       // Note: The `enter` animation doesn't transition to something like `translate3d(0, 0, 0)
@@ -117,7 +119,13 @@ export class MdDialogContainer extends BasePortalHost {
     }
 
     this._savePreviouslyFocusedElement();
-    return this._portalHost.attachComponentPortal(portal);
+
+    const componentRef = this._portalHost.attachComponentPortal(portal);
+
+    // Ensure that the initial view change are picked up.
+    componentRef.changeDetectorRef.markForCheck();
+
+    return componentRef;
   }
 
   /**
@@ -130,7 +138,12 @@ export class MdDialogContainer extends BasePortalHost {
     }
 
     this._savePreviouslyFocusedElement();
-    return this._portalHost.attachTemplatePortal(portal);
+
+    const locals = this._portalHost.attachTemplatePortal(portal);
+
+    this._changeDetectorRef.markForCheck();
+
+    return locals;
   }
 
   /** Moves the focus inside the focus trap. */

src/lib/menu/menu.spec.ts

@@ -32,7 +32,7 @@ import {
 } from '@angular/cdk/testing';
 
 
-describe('MdMenu', () => {
+fdescribe('MdMenu', () => {
   let overlayContainerElement: HTMLElement;
   let dir: Direction;
 
@@ -974,7 +974,7 @@ describe('MdMenu', () => {
           .not.toContain('mat-elevation-z3', 'Expected no stacked elevation.');
     });
 
-    it('should close all of the menus when the root is closed programmatically', fakeAsync(() => {
+    it('should close all of the menus when the root is closed programmatically', () => {
       compileTestComponent();
       instance.rootTrigger.openMenu();
       fixture.detectChanges();
@@ -991,10 +991,9 @@ describe('MdMenu', () => {
 
       instance.rootTrigger.closeMenu();
       fixture.detectChanges();
-      tick(500);
 
       expect(overlay.querySelectorAll('.mat-menu-panel').length).toBe(0, 'Expected no open menus');
-    }));
+    });
 
     it('should toggle a nested menu when its trigger is added after init', fakeAsync(() => {
       compileTestComponent();

src/lib/select/select.spec.ts

@@ -42,7 +42,7 @@ import {
 import {extendObject} from '../core/util/object-extend';
 
 
-describe('MdSelect', () => {
+fdescribe('MdSelect', () => {
   let overlayContainerElement: HTMLElement;
   let dir: {value: 'ltr'|'rtl'};
   let scrolledSubject = new Subject();