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

@@ -18,6 +18,8 @@ import {
   AfterViewChecked,
   ViewEncapsulation,
   ChangeDetectionStrategy,
+  OnChanges,
+  SimpleChanges,
 } from '@angular/core';
 import {
   trigger,
@@ -65,6 +67,7 @@ export type MdTabBodyOriginState = 'left' | 'right';
   changeDetection: ChangeDetectionStrategy.OnPush,
   host: {
     'class': 'mat-tab-body',
+    '[class.mat-tab-body-active]': 'active',
   },
   animations: [
     trigger('translateTab', [
@@ -87,18 +90,27 @@ export type MdTabBodyOriginState = 'left' | 'right';
     ])
   ]
 })
-export class MdTabBody implements OnInit, AfterViewChecked {
+export class MdTabBody implements OnInit, OnChanges, 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>;
+
+  /** Whether the tab is currently active. */
+  @Input() active: boolean;
+
+  /** 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 +158,25 @@ 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);
+
+      if (this._lastScrollPosition) {
+        // Depending on the browser, the scrollable element can end up being
+        // either the host element or the element with all the content.
+        this._contentElement.nativeElement.scrollTop =
+          this._elementRef.nativeElement.scrollTop =
+          this._lastScrollPosition;
+      }
+    }
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    // Cache the scroll position before moving away from the tab. Note that this has to be done
+    // through change detection and as early as possible, because some browsers (namely Safari)
+    // will reset the scroll position when we switch from an absolute to a relative position.
+    if (changes.active && changes.active.previousValue) {
+      this._lastScrollPosition = this._elementRef.nativeElement.scrollTop ||
+                                 this._contentElement.nativeElement.scrollTop;
     }
   }
 
@@ -176,7 +206,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.html

@@ -29,7 +29,7 @@
                *ngFor="let tab of _tabs; let i = index"
                [id]="_getTabContentId(i)"
                [attr.aria-labelledby]="_getTabLabelId(i)"
-               [class.mat-tab-body-active]="selectedIndex == i"
+               [active]="selectedIndex === i"
                [content]="tab.content"
                [position]="tab.position"
                [origin]="tab.origin"

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

@@ -259,6 +259,44 @@ 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.');
+
+      // Handle some differences in the way browsers determine what element is scrollable.
+      tabElements[1].scrollTop = tabElements[1].parentElement!.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 || tabElements[1].parentElement!.scrollTop)
+          .toBe(100, 'Expected scroll position to be restored.');
+    }));
   });
 
   describe('async tabs', () => {