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

@@ -24,6 +24,8 @@ import {
   ViewContainerRef,
   forwardRef,
   ViewChild,
+  OnChanges,
+  SimpleChanges,
 } from '@angular/core';
 import {AnimationEvent} from '@angular/animations';
 import {TemplatePortal, CdkPortalOutlet, PortalHostDirective} from '@angular/cdk/portal';
@@ -82,6 +84,7 @@ export class MatTabBodyPortal extends CdkPortalOutlet implements OnInit, OnDestr
       .subscribe((isCentering: boolean) => {
         if (isCentering && !this.hasAttached()) {
           this.attach(this._host._content);
+          this._host._restoreScrollPosition();
         }
       });
 
@@ -112,22 +115,29 @@ 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, OnDestroy {
+export class MatTabBody implements OnInit, OnChanges, OnDestroy {
 
   /** Current position of the tab-body in the tab-group. Zero means that the tab is visible. */
   private _positionIndex: number;
 
   /** Subscription to the directionality change observable. */
   private _dirChangeSubscription = Subscription.EMPTY;
 
+  /** Scroll position of the tab before the user switched away. */
+  private _lastScrollPosition = 0;
+
   /** Tab body position state. Used by the animation trigger for the current state. */
   _position: MatTabBodyPositionState;
 
   /** Emits when an animation on the tab is complete. */
   _translateTabComplete = new Subject<AnimationEvent>();
 
+  /** 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>();
 
@@ -154,6 +164,9 @@ export class MatTabBody implements OnInit, OnDestroy {
   /** Duration for the tab's animation. */
   @Input() animationDuration: string = '500ms';
 
+  /** Whether the tab is currently active. */
+  @Input() active: boolean;
+
   /** The shifted index position of the tab body, where zero represents the active center tab. */
   @Input()
   set position(position: number) {
@@ -214,16 +227,36 @@ export class MatTabBody implements OnInit, OnDestroy {
     }
   }
 
+  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;
+    }
+  }
+
   /** The text direction of the containing app. */
   _getLayoutDirection(): Direction {
     return this._dir && this._dir.value === 'rtl' ? 'rtl' : 'ltr';
   }
 
   /** 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;
+    }
   }
 
   /** Computes the position state that will be used for the tab-body animation trigger. */

src/lib/tabs/tab-group.html

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

@@ -478,6 +478,45 @@ describe('MatTabGroup', () => {
       expect(fixture.componentInstance.handleSelection).not.toHaveBeenCalled();
     }));
 
+    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', () => {

src/material-examples/tab-group-scrollable/tab-group-scrollable-example.css

@@ -0,0 +1,12 @@
+mat-tab-group {
+  height: 400px;
+}
+
+.example-content-box {
+  height: 100px;
+  width: 300px;
+  margin: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

src/material-examples/tab-group-scrollable/tab-group-scrollable-example.html

@@ -0,0 +1,7 @@
+<mat-tab-group>
+  <mat-tab [label]="tab" *ngFor="let tab of tabs">
+    <div class="example-content-box mat-elevation-z3" *ngFor="let box of boxes; let i = index">
+      {{ i }}
+    </div>
+  </mat-tab>
+</mat-tab-group>

src/material-examples/tab-group-scrollable/tab-group-scrollable-example.ts

@@ -0,0 +1,14 @@
+import {Component} from '@angular/core';
+
+/**
+ * @title Tab group with scrollable content
+ */
+@Component({
+  selector: 'tab-group-scrollable-example',
+  templateUrl: 'tab-group-scrollable-example.html',
+  styleUrls: ['tab-group-scrollable-example.css'],
+})
+export class TabGroupScrollableExample {
+  tabs = ['First', 'Second', 'Third'];
+  boxes = new Array(100);
+}

tools/public_api_guard/lib/tabs.d.ts

@@ -36,15 +36,17 @@ export declare class MatTab extends _MatTabMixinBase implements OnInit, CanDisab
     ngOnInit(): void;
 }
 
-export declare class MatTabBody implements OnInit, OnDestroy {
+export declare class MatTabBody implements OnInit, OnChanges, OnDestroy {
     readonly _afterLeavingCenter: EventEmitter<boolean>;
     readonly _beforeCentering: EventEmitter<boolean>;
     _content: TemplatePortal;
+    _contentElement: ElementRef;
     readonly _onCentered: EventEmitter<void>;
     readonly _onCentering: EventEmitter<number>;
     _portalHost: PortalHostDirective;
     _position: MatTabBodyPositionState;
     _translateTabComplete: Subject<AnimationEvent>;
+    active: boolean;
     animationDuration: string;
     origin: number;
     position: number;
@@ -53,6 +55,8 @@ export declare class MatTabBody implements OnInit, OnDestroy {
     _getLayoutDirection(): Direction;
     _isCenterPosition(position: MatTabBodyPositionState | string): boolean;
     _onTranslateTabStarted(event: AnimationEvent): void;
+    _restoreScrollPosition(): void;
+    ngOnChanges(changes: SimpleChanges): void;
     ngOnDestroy(): void;
     ngOnInit(): void;
 }