use overlay for clipping instead of trigger

Author: andrewseguin

src/lib/core/overlay/position/connected-position-strategy.ts

@@ -35,7 +35,7 @@ export class ConnectedPositionStrategy implements PositionStrategy {
   private _offsetY: number = 0;
 
   /** The Scrollable containers that may cause the overlay's connectedTo element to be clipped */
-  private scrollables: Scrollable[];
+  private scrollables: Scrollable[] = [];
 
   /** Whether the we're dealing with an RTL context */
   get _isRtl() {
@@ -106,7 +106,7 @@ export class ConnectedPositionStrategy implements PositionStrategy {
       // If the overlay in the calculated position fits on-screen, put it there and we're done.
       if (overlayPoint.fitsInViewport) {
         this._setElementPosition(element, overlayPoint);
-        const isClipped = this.isConnectedToElementClipped();
+        const isClipped = this.isOverlayElementClipped(element);
         this._onPositionChange.next(new ConnectedOverlayPositionChange(pos, isClipped));
         return Promise.resolve(null);
       } else if (!fallbackPoint || fallbackPoint.visibleArea < overlayPoint.visibleArea) {
@@ -262,6 +262,21 @@ export class ConnectedPositionStrategy implements PositionStrategy {
     return {x, y, fitsInViewport, visibleArea};
   }
 
+  /** Whether the overlay element is clipped out of view of one of the scrollable containers. */
+  private isOverlayElementClipped(element: HTMLElement): boolean {
+    const elementBounds = this._getElementBounds(element);
+    return this.scrollables.some((scrollable: Scrollable) => {
+      const scrollingContainerBounds = this._getElementBounds(scrollable.getElementRef().nativeElement);
+
+      const clippedAbove = elementBounds.top < scrollingContainerBounds.top;
+      const clippedBelow = elementBounds.bottom > scrollingContainerBounds.bottom;
+      const clippedLeft = elementBounds.left < scrollingContainerBounds.left;
+      const clippedRight = elementBounds.right > scrollingContainerBounds.right;
+
+      return clippedAbove || clippedBelow || clippedLeft || clippedRight;
+    });
+  }
+
   /**
    * Physically positions the overlay element to the given coordinate.
    * @param element
@@ -272,8 +287,8 @@ export class ConnectedPositionStrategy implements PositionStrategy {
     element.style.top = overlayPoint.y + 'px';
   }
 
-  private _getElementBounds(element: ElementRef): ElementBoundingPositions {
-    const boundingClientRect = element.nativeElement.getBoundingClientRect();
+  private _getElementBounds(element: HTMLElement): ElementBoundingPositions {
+    const boundingClientRect = element.getBoundingClientRect();
     return {
       top: boundingClientRect.top,
       right: boundingClientRect.left + boundingClientRect.width,

src/lib/core/overlay/position/connected-position.ts

@@ -34,6 +34,5 @@ export class ConnectionPositionPair {
 
 /** The change event emitted by the strategy when a fallback position is used. */
 export class ConnectedOverlayPositionChange {
-  constructor(public connectionPair: ConnectionPositionPair,
-              public isConnectedToElementClipped: boolean) {}
+  constructor(public connectionPair: ConnectionPositionPair, public isClipped: boolean) {}
 }

src/lib/core/overlay/scroll/scroll-dispatcher.ts

@@ -59,7 +59,7 @@ export class ScrollDispatcher {
   }
 
   /** Returns all registered Scrollables that contain the provided element. */
-  getScrollableContainers(elementRef: ElementRef): Scrollable[] {
+  getScrollContainers(elementRef: ElementRef): Scrollable[] {
     const scrollingContainers: Scrollable[] = [];
 
     this.scrollableReferences.forEach((subscription: Subscription, scrollable: Scrollable) => {

src/lib/tooltip/tooltip.ts

@@ -180,13 +180,10 @@ export class MdTooltip implements OnInit, OnDestroy {
     let position = this._getOverlayPosition();
 
     // Create connected strategy that listens for scroll events to reposition. After position
-    // changes occur, check if the scrolling trigger has been clipped and close the tooltip.
+    // changes occur and the overlay is clipped then close the tooltip.
     let strategy = this._overlay.position().connectedTo(this._elementRef, origin, position);
-    strategy.withScrollableContainers(
-        this._scrollDispatcher.getScrollableContainers(this._elementRef));
-    strategy.onPositionChange.subscribe(change => {
-      if (change.isConnectedToElementClipped) { this.hide(0); }
-    });
+    strategy.withScrollableContainers(this._scrollDispatcher.getScrollContainers(this._elementRef));
+    strategy.onPositionChange.subscribe(change => { if (change.isClipped) { this.hide(0); } });
 
     let config = new OverlayState();
     config.positionStrategy = strategy;

tools/gulp/tasks/components.ts

@@ -81,6 +81,7 @@ task(':build:components:rollup', () => {
     'rxjs/add/operator/finally': 'Rx.Observable.prototype',
     'rxjs/add/operator/catch': 'Rx.Observable.prototype',
     'rxjs/add/operator/first': 'Rx.Observable.prototype',
+    'rxjs/add/operator/combineLatest': 'Rx.Observable.prototype',
     'rxjs/Observable': 'Rx'
   };