feat(tabs): add the ability to keep content inside the DOM while off-screen

Adds the `preserveContent` input which allows consumers to opt into keeping the content of off-screen tabs inside the DOM. This is useful primarily for edge cases like iframes and videos where removing the element from the DOM will cause it to reload.

One gotcha here is that we have to set `visibility: hidden` on the off-screen content so that users can't tab into it.

Fixes #19480.

Author: crisbeto

src/material-experimental/mdc-tabs/tab-group.html

@@ -59,6 +59,7 @@
                [position]="tab.position!"
                [origin]="tab.origin"
                [animationDuration]="animationDuration"
+               [preserveContent]="preserveContent"
                (_onCentered)="_removeTabBodyWrapperHeight()"
                (_onCentering)="_setTabBodyWrapperHeight($event)">
   </mat-tab-body>

src/material-experimental/mdc-tabs/tab-group.spec.ts

@@ -578,6 +578,44 @@ describe('MDC-based MatTabGroup', () => {
 
       expect(tabGroupNode.classList).toContain('mat-mdc-tab-group-inverted-header');
     });
+
+    it('should be able to opt into keeping the inactive tab content in the DOM', fakeAsync(() => {
+      fixture.componentInstance.preserveContent = true;
+      fixture.detectChanges();
+
+      expect(fixture.nativeElement.textContent).toContain('Pizza, fries');
+      expect(fixture.nativeElement.textContent).not.toContain('Peanuts');
+
+      tabGroup.selectedIndex = 3;
+      fixture.detectChanges();
+      tick();
+
+      expect(fixture.nativeElement.textContent).toContain('Pizza, fries');
+      expect(fixture.nativeElement.textContent).toContain('Peanuts');
+    }));
+
+    it('should visibly hide the content of inactive tabs', fakeAsync(() => {
+      const contentElements: HTMLElement[] =
+          Array.from(fixture.nativeElement.querySelectorAll('.mat-mdc-tab-body-content'));
+
+      expect(contentElements.map(element => element.style.visibility))
+          .toEqual(['visible', 'hidden', 'hidden', 'hidden']);
+
+      tabGroup.selectedIndex = 2;
+      fixture.detectChanges();
+      tick();
+
+      expect(contentElements.map(element => element.style.visibility))
+          .toEqual(['hidden', 'hidden', 'visible', 'hidden']);
+
+      tabGroup.selectedIndex = 1;
+      fixture.detectChanges();
+      tick();
+
+      expect(contentElements.map(element => element.style.visibility))
+          .toEqual(['hidden', 'visible', 'hidden', 'hidden']);
+    }));
+
   });
 
   describe('lazy loaded tabs', () => {
@@ -919,7 +957,7 @@ class AsyncTabsTestApp implements OnInit {
 
 @Component({
   template: `
-  <mat-tab-group>
+  <mat-tab-group [preserveContent]="preserveContent">
     <mat-tab label="Junk food"> Pizza, fries </mat-tab>
     <mat-tab label="Vegetables"> Broccoli, spinach </mat-tab>
     <mat-tab [label]="otherLabel"> {{otherContent}} </mat-tab>
@@ -928,6 +966,7 @@ class AsyncTabsTestApp implements OnInit {
   `
 })
 class TabGroupWithSimpleApi {
+  preserveContent = false;
   otherLabel = 'Fruit';
   otherContent = 'Apples, grapes';
   @ViewChild('legumes') legumes: any;

src/material/tabs/tab-body.ts

@@ -92,7 +92,9 @@ export class MatTabBodyPortal extends CdkPortalOutlet implements OnInit, OnDestr
       });
 
     this._leavingSub = this._host._afterLeavingCenter.subscribe(() => {
-      this.detach();
+      if (!this._host.preserveContent) {
+        this.detach();
+      }
     });
   }
 
@@ -148,6 +150,9 @@ export abstract class _MatTabBodyBase implements OnInit, OnDestroy {
   /** Duration for the tab's animation. */
   @Input() animationDuration: string = '500ms';
 
+  /** Whether the tab's content should be kept in the DOM while it's off-screen. */
+  @Input() preserveContent: boolean = false;
+
   /** The shifted index position of the tab body, where zero represents the active center tab. */
   @Input()
   set position(position: number) {

src/material/tabs/tab-config.ts

@@ -23,6 +23,13 @@ export interface MatTabsConfig {
    * This only applies to the MDC-based tabs.
    */
   fitInkBarToContent?: boolean;
+
+  /**
+   * By default tabs remove their content from the DOM while it's off-screen.
+   * Setting this to `true` will keep it in the DOM which will prevent elements
+   * like iframes and videos from reloading next time it comes back into the view.
+   */
+  preserveContent?: boolean;
 }
 
 /** Injection token that can be used to provide the default options the tabs module. */

src/material/tabs/tab-group.html

@@ -45,6 +45,7 @@
                [position]="tab.position!"
                [origin]="tab.origin"
                [animationDuration]="animationDuration"
+               [preserveContent]="preserveContent"
                (_onCentered)="_removeTabBodyWrapperHeight()"
                (_onCentering)="_setTabBodyWrapperHeight($event)">
   </mat-tab-body>

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

@@ -576,6 +576,44 @@ describe('MatTabGroup', () => {
 
       expect(tabGroupNode.classList).toContain('mat-tab-group-inverted-header');
     });
+
+    it('should be able to opt into keeping the inactive tab content in the DOM', fakeAsync(() => {
+      fixture.componentInstance.preserveContent = true;
+      fixture.detectChanges();
+
+      expect(fixture.nativeElement.textContent).toContain('Pizza, fries');
+      expect(fixture.nativeElement.textContent).not.toContain('Peanuts');
+
+      tabGroup.selectedIndex = 3;
+      fixture.detectChanges();
+      tick();
+
+      expect(fixture.nativeElement.textContent).toContain('Pizza, fries');
+      expect(fixture.nativeElement.textContent).toContain('Peanuts');
+    }));
+
+    it('should visibly hide the content of inactive tabs', fakeAsync(() => {
+      const contentElements: HTMLElement[] =
+          Array.from(fixture.nativeElement.querySelectorAll('.mat-tab-body-content'));
+
+      expect(contentElements.map(element => element.style.visibility))
+          .toEqual(['visible', 'hidden', 'hidden', 'hidden']);
+
+      tabGroup.selectedIndex = 2;
+      fixture.detectChanges();
+      tick();
+
+      expect(contentElements.map(element => element.style.visibility))
+          .toEqual(['hidden', 'hidden', 'visible', 'hidden']);
+
+      tabGroup.selectedIndex = 1;
+      fixture.detectChanges();
+      tick();
+
+      expect(contentElements.map(element => element.style.visibility))
+          .toEqual(['hidden', 'visible', 'hidden', 'hidden']);
+    }));
+
   });
 
   describe('lazy loaded tabs', () => {
@@ -842,7 +880,7 @@ class AsyncTabsTestApp implements OnInit {
 
 @Component({
   template: `
-  <mat-tab-group>
+  <mat-tab-group [preserveContent]="preserveContent">
     <mat-tab label="Junk food"> Pizza, fries </mat-tab>
     <mat-tab label="Vegetables"> Broccoli, spinach </mat-tab>
     <mat-tab [label]="otherLabel"> {{otherContent}} </mat-tab>
@@ -851,6 +889,7 @@ class AsyncTabsTestApp implements OnInit {
   `
 })
 class TabGroupWithSimpleApi {
+  preserveContent = false;
   otherLabel = 'Fruit';
   otherContent = 'Apples, grapes';
   @ViewChild('legumes') legumes: any;

src/material/tabs/tab-group.ts

@@ -137,6 +137,14 @@ export abstract class _MatTabGroupBase extends _MatTabGroupMixinBase implements
   @Input()
   disablePagination: boolean;
 
+  /**
+   * By default tabs remove their content from the DOM while it's off-screen.
+   * Setting this to `true` will keep it in the DOM which will prevent elements
+   * like iframes and videos from reloading next time it comes back into the view.
+   */
+  @Input()
+  preserveContent: boolean;
+
   /** Background color of the tab group. */
   @Input()
   get backgroundColor(): ThemePalette { return this._backgroundColor; }
@@ -179,6 +187,7 @@ export abstract class _MatTabGroupBase extends _MatTabGroupMixinBase implements
         defaultConfig.animationDuration : '500ms';
     this.disablePagination = defaultConfig && defaultConfig.disablePagination != null ?
         defaultConfig.disablePagination : false;
+    this.preserveContent = !!defaultConfig?.preserveContent;
   }
 
   /**

src/material/tabs/tabs-animations.ts

@@ -23,24 +23,39 @@ export const matTabsAnimations: {
 } = {
   /** Animation translates a tab along the X axis. */
   translateTab: trigger('translateTab', [
-    // Note: transitions to `none` instead of 0, because some browsers might blur the content.
-    state('center, void, left-origin-center, right-origin-center', style({transform: 'none'})),
+    state('center, void, left-origin-center, right-origin-center', style({
+      // Transitions to `none` instead of 0, because some browsers might blur the content.
+      transform: 'none',
+      // Ensures that the `visibility: hidden` from below is cleared.
+      visibility: 'visible'
+    })),
 
     // If the tab is either on the left or right, we additionally add a `min-height` of 1px
     // in order to ensure that the element has a height before its state changes. This is
     // necessary because Chrome does seem to skip the transition in RTL mode if the element does
     // not have a static height and is not rendered. See related issue: #9465
-    state('left', style({transform: 'translate3d(-100%, 0, 0)', minHeight: '1px'})),
-    state('right', style({transform: 'translate3d(100%, 0, 0)', minHeight: '1px'})),
+    state('left', style({
+      transform: 'translate3d(-100%, 0, 0)',
+      minHeight: '1px',
+
+      // Normally this is redundant since we detach the content from the DOM, but if the user
+      // opted into keeping the content in the DOM, we have to hide it so it isn't focusable.
+      visibility: 'hidden'
+    })),
+    state('right', style({
+      transform: 'translate3d(100%, 0, 0)',
+      minHeight: '1px',
+      visibility: 'hidden'
+    })),
 
     transition('* => left, * => right, left => center, right => center',
         animate('{{animationDuration}} cubic-bezier(0.35, 0, 0.25, 1)')),
     transition('void => left-origin-center', [
-      style({transform: 'translate3d(-100%, 0, 0)'}),
+      style({transform: 'translate3d(-100%, 0, 0)', visibility: 'hidden'}),
       animate('{{animationDuration}} cubic-bezier(0.35, 0, 0.25, 1)')
     ]),
     transition('void => right-origin-center', [
-      style({transform: 'translate3d(100%, 0, 0)'}),
+      style({transform: 'translate3d(100%, 0, 0)', visibility: 'hidden'}),
       animate('{{animationDuration}} cubic-bezier(0.35, 0, 0.25, 1)')
     ])
   ])

tools/public_api_guard/material/tabs.d.ts

@@ -19,13 +19,14 @@ export declare abstract class _MatTabBodyBase implements OnInit, OnDestroy {
     animationDuration: string;
     origin: number | null;
     set position(position: number);
+    preserveContent: boolean;
     constructor(_elementRef: ElementRef<HTMLElement>, _dir: Directionality, changeDetectorRef: ChangeDetectorRef);
     _getLayoutDirection(): Direction;
     _isCenterPosition(position: MatTabBodyPositionState | string): boolean;
     _onTranslateTabStarted(event: AnimationEvent): void;
     ngOnDestroy(): void;
     ngOnInit(): void;
-    static ɵdir: i0.ɵɵDirectiveDefWithMeta<_MatTabBodyBase, never, never, { "_content": "content"; "origin": "origin"; "animationDuration": "animationDuration"; "position": "position"; }, { "_onCentering": "_onCentering"; "_beforeCentering": "_beforeCentering"; "_afterLeavingCenter": "_afterLeavingCenter"; "_onCentered": "_onCentered"; }, never>;
+    static ɵdir: i0.ɵɵDirectiveDefWithMeta<_MatTabBodyBase, never, never, { "_content": "content"; "origin": "origin"; "animationDuration": "animationDuration"; "preserveContent": "preserveContent"; "position": "position"; }, { "_onCentering": "_onCentering"; "_beforeCentering": "_beforeCentering"; "_afterLeavingCenter": "_afterLeavingCenter"; "_onCentered": "_onCentered"; }, never>;
     static ɵfac: i0.ɵɵFactoryDef<_MatTabBodyBase, [null, { optional: true; }, null]>;
 }
 
@@ -46,6 +47,7 @@ export declare abstract class _MatTabGroupBase extends _MatTabGroupMixinBase imp
     set dynamicHeight(value: boolean);
     readonly focusChange: EventEmitter<MatTabChangeEvent>;
     headerPosition: MatTabHeaderPosition;
+    preserveContent: boolean;
     get selectedIndex(): number | null;
     set selectedIndex(value: number | null);
     readonly selectedIndexChange: EventEmitter<number>;
@@ -66,7 +68,7 @@ export declare abstract class _MatTabGroupBase extends _MatTabGroupMixinBase imp
     static ngAcceptInputType_disableRipple: BooleanInput;
     static ngAcceptInputType_dynamicHeight: BooleanInput;
     static ngAcceptInputType_selectedIndex: NumberInput;
-    static ɵdir: i0.ɵɵDirectiveDefWithMeta<_MatTabGroupBase, never, never, { "dynamicHeight": "dynamicHeight"; "selectedIndex": "selectedIndex"; "headerPosition": "headerPosition"; "animationDuration": "animationDuration"; "disablePagination": "disablePagination"; "backgroundColor": "backgroundColor"; }, { "selectedIndexChange": "selectedIndexChange"; "focusChange": "focusChange"; "animationDone": "animationDone"; "selectedTabChange": "selectedTabChange"; }, never>;
+    static ɵdir: i0.ɵɵDirectiveDefWithMeta<_MatTabGroupBase, never, never, { "dynamicHeight": "dynamicHeight"; "selectedIndex": "selectedIndex"; "headerPosition": "headerPosition"; "animationDuration": "animationDuration"; "disablePagination": "disablePagination"; "preserveContent": "preserveContent"; "backgroundColor": "backgroundColor"; }, { "selectedIndexChange": "selectedIndexChange"; "focusChange": "focusChange"; "animationDone": "animationDone"; "selectedTabChange": "selectedTabChange"; }, never>;
     static ɵfac: i0.ɵɵFactoryDef<_MatTabGroupBase, [null, null, { optional: true; }, { optional: true; }]>;
 }
 
@@ -254,6 +256,7 @@ export interface MatTabsConfig {
     animationDuration?: string;
     disablePagination?: boolean;
     fitInkBarToContent?: boolean;
+    preserveContent?: boolean;
 }
 
 export declare class MatTabsModule {