remove usage of scrollables until throttling is set up

Author: andrewseguin

src/demo-app/tooltip/tooltip-demo.html

@@ -1,8 +1,8 @@
 <div class="demo-tooltip">
   <h1>Tooltip Demo</h1>
 
-  <p class="centered" style="height: 200px; overflow: auto;" cdk-scrollable>
-    <button #tooltip="mdTooltip" style="margin-bottom: 300px;"
+  <p class="centered">
+    <button #tooltip="mdTooltip"
             md-raised-button
             color="primary"
             [mdTooltip]="message"
@@ -11,7 +11,6 @@ <h1>Tooltip Demo</h1>
             [mdTooltipHideDelay]="hideDelay">
       Mouse over to see the tooltip
     </button>
-    Scroll down while tooltip is open to see it hide automatically
   </p>
 
   <p>

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

@@ -432,6 +432,7 @@ describe('ConnectedPositionStrategy', () => {
 
   describe('onPositionChange with scrollable view properties', () => {
     let overlayElement: HTMLElement;
+    let overlayContainerElement: HTMLElement;
     let strategy: ConnectedPositionStrategy;
 
     let scrollable: HTMLDivElement;
@@ -441,7 +442,7 @@ describe('ConnectedPositionStrategy', () => {
 
     beforeEach(() => {
       // Set up the overlay
-      let overlayContainerElement = createFixedElement();
+      overlayContainerElement = createFixedElement();
       overlayElement = createPositionedBlockElement();
       document.body.appendChild(overlayContainerElement);
       overlayContainerElement.appendChild(overlayElement);
@@ -471,6 +472,7 @@ describe('ConnectedPositionStrategy', () => {
     afterEach(() => {
       onPositionChangeSubscription.unsubscribe();
       document.body.removeChild(scrollable);
+      document.body.removeChild(overlayContainerElement);
     });
 
     it('should not have origin or overlay clipped or out of view without scroll', () => {

src/lib/sidenav/sidenav-container.html

@@ -3,6 +3,6 @@
 
 <ng-content select="md-sidenav, mat-sidenav"></ng-content>
 
-<div class="md-sidenav-content" [ngStyle]="_getStyles()" cdk-scrollable>
+<div class="md-sidenav-content" [ngStyle]="_getStyles()">
   <ng-content></ng-content>
 </div>

src/lib/sidenav/sidenav.ts

@@ -22,7 +22,6 @@ import {FocusTrap} from '../core/a11y/focus-trap';
 import {ESCAPE} from '../core/keyboard/keycodes';
 import {OverlayModule} from '../core/overlay/overlay-directives';
 import {InteractivityChecker} from '../core/a11y/interactivity-checker';
-import {ScrollDispatcher} from '../core/overlay/scroll/scroll-dispatcher';
 
 
 /** Exception thrown when two MdSidenav are matching the same side. */
@@ -516,7 +515,7 @@ export class MdSidenavModule {
   static forRoot(): ModuleWithProviders {
     return {
       ngModule: MdSidenavModule,
-      providers: [InteractivityChecker, ScrollDispatcher]
+      providers: [InteractivityChecker]
     };
   }
 }

src/lib/tooltip/tooltip.spec.ts

@@ -1,18 +1,17 @@
 import {
-    async,
-    ComponentFixture,
-    TestBed,
-    tick,
-    fakeAsync,
-    flushMicrotasks
+  async,
+  ComponentFixture,
+  TestBed,
+  tick,
+  fakeAsync,
+  flushMicrotasks
 } from '@angular/core/testing';
-import {Component, DebugElement, AnimationTransitionEvent, ViewChild} from '@angular/core';
+import {Component, DebugElement, AnimationTransitionEvent} from '@angular/core';
 import {By} from '@angular/platform-browser';
 import {TooltipPosition, MdTooltip, MdTooltipModule} from './tooltip';
 import {OverlayContainer} from '../core';
 import {Dir, LayoutDirection} from '../core/rtl/dir';
 import {OverlayModule} from '../core/overlay/overlay-directives';
-import {Scrollable} from '../core/overlay/scroll/scrollable';
 
 const initialTooltipMessage = 'initial tooltip message';
 
@@ -23,7 +22,7 @@ describe('MdTooltip', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       imports: [MdTooltipModule.forRoot(), OverlayModule],
-      declarations: [BasicTooltipDemo, ScrollableTooltipDemo],
+      declarations: [BasicTooltipDemo],
       providers: [
         {provide: OverlayContainer, useFactory: () => {
           overlayContainerElement = document.createElement('div');
@@ -298,34 +297,6 @@ describe('MdTooltip', () => {
       }).toThrowError('Tooltip position "everywhere" is invalid.');
     });
   });
-
-
-  describe('scrollable usage', () => {
-    let fixture: ComponentFixture<ScrollableTooltipDemo>;
-    let buttonDebugElement: DebugElement;
-    let buttonElement: HTMLButtonElement;
-    let tooltipDirective: MdTooltip;
-
-    beforeEach(() => {
-      fixture = TestBed.createComponent(ScrollableTooltipDemo);
-      fixture.detectChanges();
-      buttonDebugElement = fixture.debugElement.query(By.css('button'));
-      buttonElement = <HTMLButtonElement> buttonDebugElement.nativeElement;
-      tooltipDirective = buttonDebugElement.injector.get(MdTooltip);
-    });
-
-    it('should hide tooltip if clipped after changing positions', fakeAsync(() => {
-      expect(tooltipDirective._tooltipInstance).toBeUndefined();
-
-      tooltipDirective.show();
-      tick(0); // Tick for the show delay (default is 0)
-      expect(tooltipDirective._isTooltipVisible()).toBe(true);
-
-      fixture.componentInstance.scrollDown();
-      tick();
-      expect(tooltipDirective._isTooltipVisible()).toBe(false);
-    }));
-  });
 });
 
 @Component({
@@ -343,33 +314,3 @@ class BasicTooltipDemo {
   showButton: boolean = true;
 }
 
-@Component({
-  selector: 'app',
-  template: `
-    <div cdk-scrollable style="margin-top: 300px; height: 200px; width: 200px; overflow: auto;">
-      <button *ngIf="showButton" style="margin-bottom: 350px"
-              [md-tooltip]="message"
-              [tooltip-position]="position">
-        Button
-      </button>
-    </div>`
-})
-class ScrollableTooltipDemo {
-  position: string = 'below';
-  message: string = initialTooltipMessage;
-  showButton: boolean = true;
-
-  @ViewChild(Scrollable) scrollingContainer: Scrollable;
-
-  scrollDown() {
-    const scrollingContainerEl = this.scrollingContainer.getElementRef().nativeElement;
-    scrollingContainerEl.scrollTop = 50;
-
-    // Emit a scroll event from the scrolling element in our component.
-    // This event should be picked up by the scrollable directive and notify.
-    // The notification should be picked up by the service.
-    const scrollEvent = document.createEvent('UIEvents');
-    scrollEvent.initUIEvent('scroll', true, true, window, 0);
-    scrollingContainerEl.dispatchEvent(scrollEvent);
-  }
-}

src/lib/tooltip/tooltip.ts

@@ -31,9 +31,7 @@ import {MdTooltipInvalidPositionError} from './tooltip-errors';
 import {Observable} from 'rxjs/Observable';
 import {Subject} from 'rxjs/Subject';
 import {Dir} from '../core/rtl/dir';
-import {ScrollDispatcher} from '../core/overlay/scroll/scroll-dispatcher';
 import {OVERLAY_PROVIDERS} from '../core/overlay/overlay';
-import {ConnectedOverlayPositionChange} from '../core/overlay/position/connected-position';
 import 'rxjs/add/operator/first';
 
 export type TooltipPosition = 'left' | 'right' | 'above' | 'below' | 'before' | 'after';
@@ -57,7 +55,7 @@ export const TOUCHEND_HIDE_DELAY  = 1500;
   },
   exportAs: 'mdTooltip',
 })
-export class MdTooltip implements OnInit, OnDestroy {
+export class MdTooltip implements OnDestroy {
   _overlayRef: OverlayRef;
   _tooltipInstance: TooltipComponent;
 
@@ -106,22 +104,11 @@ export class MdTooltip implements OnInit, OnDestroy {
   set _deprecatedMessage(v: string) { this.message = v; }
 
   constructor(private _overlay: Overlay,
-              private _scrollDispatcher: ScrollDispatcher,
               private _elementRef: ElementRef,
               private _viewContainerRef: ViewContainerRef,
               private _ngZone: NgZone,
               @Optional() private _dir: Dir) { }
 
-  ngOnInit() {
-    // When a scroll on the page occurs, update the position in case this tooltip needs
-    // to be repositioned.
-    this._scrollDispatcher.scrolled().subscribe(() => {
-      if (this._overlayRef) {
-        this._overlayRef.updatePosition();
-      }
-    });
-  }
-
   /**
    * Dispose the tooltip when destroyed.
    */
@@ -179,18 +166,7 @@ export class MdTooltip implements OnInit, OnDestroy {
   private _createOverlay(): void {
     let origin = this._getOrigin();
     let position = this._getOverlayPosition();
-
-    // Create connected position strategy that listens for scroll events to reposition.
-    // After position changes occur and the overlay is clipped by a parent scrollable then
-    // close the tooltip.
     let strategy = this._overlay.position().connectedTo(this._elementRef, origin, position);
-    strategy.withScrollableContainers(this._scrollDispatcher.getScrollContainers(this._elementRef));
-    strategy.onPositionChange.subscribe(change => {
-      if (change.scrollableViewProperties.isOverlayClipped) {
-        this.hide(0);
-      }
-    });
-
     let config = new OverlayState();
     config.positionStrategy = strategy;
 
@@ -412,10 +388,7 @@ export class MdTooltipModule {
   static forRoot(): ModuleWithProviders {
     return {
       ngModule: MdTooltipModule,
-      providers: [
-        OVERLAY_PROVIDERS,
-        ScrollDispatcher
-      ]
+      providers: [OVERLAY_PROVIDERS]
     };
   }
 }