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

@@ -23,6 +23,8 @@ import {
   ViewContainerRef,
   forwardRef,
   ViewChild,
+  OnChanges,
+  SimpleChanges,
 } from '@angular/core';
 import {AnimationEvent} from '@angular/animations';
 import {TemplatePortal, CdkPortalOutlet, PortalHostDirective} from '@angular/cdk/portal';
@@ -75,10 +77,12 @@ export class MatTabBodyPortal extends CdkPortalOutlet implements OnInit, OnDestr
   ngOnInit(): void {
     if (this._host._isCenterPosition(this._host._position)) {
       this.attach(this._host._content);
+      this._host._restoreScrollPosition();
     }
     this._centeringSub = this._host._beforeCentering.subscribe((isCentering: boolean) => {
       if (isCentering && !this.hasAttached()) {
         this.attach(this._host._content);
+        this._host._restoreScrollPosition();
       }
     });
 
@@ -113,9 +117,13 @@ export class MatTabBodyPortal extends CdkPortalOutlet implements OnInit, OnDestr
   animations: [matTabsAnimations.translateTab],
   host: {
     'class': 'mat-tab-body',
+    '[class.mat-tab-body-active]': 'active',
   },
 })
-export class MatTabBody implements OnInit {
+export class MatTabBody implements OnInit, OnChanges {
+  /** 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() readonly _onCentering: EventEmitter<number> = new EventEmitter<number>();
 
@@ -134,6 +142,12 @@ export class MatTabBody implements OnInit {
   /** The tab body content to display. */
   @Input('content') _content: TemplatePortal;
 
+  /** 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. */
   @Input()
   set position(position: number) {
@@ -182,6 +196,16 @@ export class MatTabBody implements OnInit {
     }
   }
 
+  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;
+    }
+  }
+
   _onTranslateTabComplete(e: AnimationEvent): void {
     // If the transition to the center is complete, emit an event.
     if (this._isCenterPosition(e.toState) && this._isCenterPosition(this._position)) {
@@ -199,9 +223,19 @@ export class MatTabBody implements OnInit {
   }
 
   /** Whether the provided position state is considered center, regardless of origin. */
-  _isCenterPosition(position: MatTabBodyPositionState|string): boolean {
+  _isCenterPosition(position: MatTabBodyPositionState | string): boolean {
     return position == 'center' ||
-        position == 'left-origin-center' ||
-        position == 'right-origin-center';
+           position == 'left-origin-center' ||
+           position == 'right-origin-center';
+  }
+
+  _restoreScrollPosition() {
+    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;
+    }
   }
 }

src/lib/tabs/tab-group.html

@@ -32,7 +32,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

@@ -309,6 +309,44 @@ describe('MatTabGroup', () => {
       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('mat-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', () => {