fix(tabs): preserve scroll position when switching between tabs

Preserves the scroll position when switching between tabs. Previously it was being reset to 0, because we detach and re-attach the content.

Fixes #6722.

Author: crisbeto

src/lib/tabs/tab-body.ts

@@ -91,14 +91,20 @@ export class MdTabBody implements OnInit, AfterViewChecked {
   /** The portal host inside of this container into which the tab body content will be loaded. */
   @ViewChild(PortalHostDirective) _portalHost: PortalHostDirective;
 
+  /** Element wrapping the tab's content. */
+  @ViewChild('content') _contentElement: ElementRef;
+
   /** Event emitted when the tab begins to animate towards the center as the active tab. */
   @Output() onCentering: EventEmitter<number> = new EventEmitter<number>();
 
   /** Event emitted when the tab completes its animation towards the center. */
   @Output() onCentered: EventEmitter<void> = new EventEmitter<void>(true);
 
   /** The tab body content to display. */
-  @Input('content') _content: TemplatePortal<any>;
+  @Input('content') _contentPortal: TemplatePortal<any>;
+
+  /** Scroll position of the tab before the user switched away. */
+  private _lastScrollPosition = 0;
 
   /** The shifted index position of the tab body, where zero represents the active center tab. */
   _position: MdTabBodyPositionState;
@@ -146,7 +152,8 @@ export class MdTabBody implements OnInit, AfterViewChecked {
    */
   ngAfterViewChecked() {
     if (this._isCenterPosition(this._position) && !this._portalHost.hasAttached()) {
-      this._portalHost.attach(this._content);
+      this._portalHost.attach(this._contentPortal);
+      this._contentElement.nativeElement.scrollTop = this._lastScrollPosition;
     }
   }
 
@@ -159,6 +166,7 @@ export class MdTabBody implements OnInit, AfterViewChecked {
   _onTranslateTabComplete(e: AnimationEvent) {
     // If the end state is that the tab is not centered, then detach the content.
     if (!this._isCenterPosition(e.toState) && !this._isCenterPosition(this._position)) {
+      this._lastScrollPosition = this._contentElement.nativeElement.scrollTop || 0;
       this._portalHost.detach();
     }
 
@@ -176,7 +184,7 @@ export class MdTabBody implements OnInit, AfterViewChecked {
   /** Whether the provided position state is considered center, regardless of origin. */
   private _isCenterPosition(position: MdTabBodyPositionState|string): boolean {
     return position == 'center' ||
-        position == 'left-origin-center' ||
-        position == 'right-origin-center';
+           position == 'left-origin-center' ||
+           position == 'right-origin-center';
   }
 }

src/lib/tabs/tab-group.spec.ts

@@ -259,6 +259,41 @@ describe('MdTabGroup', () => {
       expect(component.selectedIndex).toBe(numberOfTabs - 2);
     });
 
+    it('should preserve the scroll position when switching between tabs', fakeAsync(() => {
+      const testComponent = fixture.componentInstance;
+
+      // Add a lot of content to make one of the tabs scrollable.
+      testComponent.tabs[1].content = new Array(500).fill('content!').join('\n\n');
+      fixture.detectChanges();
+      tick(500);
+
+      // Cap the tab group height.
+      fixture.debugElement.query(By.css('md-tab-group')).nativeElement.style.height = `300px`;
+
+      const tabElements = fixture.debugElement.queryAll(By.css('.mat-tab-body-content'))
+        .map(debugElement => debugElement.nativeElement as HTMLElement);
+
+      // Focus the tab with the extra content.
+      testComponent.selectedIndex = 1;
+      fixture.detectChanges();
+      tick(500);
+
+      // Ensure that there is content and scroll down 100px.
+      expect(tabElements[1].offsetHeight).toBeGreaterThan(0, 'Expected tab to have some content.');
+      tabElements[1].scrollTop = 100;
+
+      // Move to another tab.
+      testComponent.selectedIndex = 0;
+      fixture.detectChanges();
+      tick(500);
+
+      // Switch back to the tab with the extra content.
+      testComponent.selectedIndex = 1;
+      fixture.detectChanges();
+      tick(500);
+
+      expect(tabElements[1].scrollTop).toBe(100, 'Expected scroll position to be restored.');
+    }));
   });
 
   describe('async tabs', () => {