Skip to content

Commit c3188c8

Browse files
crisbetocrisbeto
authored
feat(material/tabs): add the ability to keep content inside the DOM while off-screen (#20393)
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.
1 parent 5a00027 commit c3188c8

File tree

15 files changed

+221
-11
lines changed

15 files changed

+221
-11
lines changed

‎src/components-examples/material/tabs/index.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import {TabGroupHarnessExample} from './tab-group-harness/tab-group-harness-exam
1717
import {TabGroupDynamicExample} from './tab-group-dynamic/tab-group-dynamic-example';
1818
import {TabGroupHeaderBelowExample} from './tab-group-header-below/tab-group-header-below-example';
1919
import {TabGroupLazyLoadedExample} from './tab-group-lazy-loaded/tab-group-lazy-loaded-example';
20+
import {TabGroupPreserveContentExample} from './tab-group-preserve-content/tab-group-preserve-content-example';
2021
import {TabGroupStretchedExample} from './tab-group-stretched/tab-group-stretched-example';
2122
import {TabGroupThemeExample} from './tab-group-theme/tab-group-theme-example';
2223
import {TabNavBarBasicExample} from './tab-nav-bar-basic/tab-nav-bar-basic-example';
@@ -37,6 +38,7 @@ export {
3738
TabGroupThemeExample,
3839
TabNavBarBasicExample,
3940
TabNavBarWithPanelExample,
41+
TabGroupPreserveContentExample,
4042
};
4143

4244
const EXAMPLES = [
@@ -54,6 +56,7 @@ const EXAMPLES = [
5456
TabGroupThemeExample,
5557
TabNavBarBasicExample,
5658
TabNavBarWithPanelExample,
59+
TabGroupPreserveContentExample,
5760
];
5861

5962
@NgModule({

‎src/components-examples/material/tabs/tab-group-preserve-content/tab-group-preserve-content-example.html

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<p>Start the video in the first tab and navigate to the second one to see how it keeps playing.</p>
2+
3+
<mat-tab-group [preserveContent]="true">
4+
<mat-tab label="First">
5+
<iframe
6+
width="560"
7+
height="315"
8+
src="https://www.youtube.com/embed/B-lipaiZII8"
9+
frameborder="0"
10+
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
11+
allowfullscreen></iframe>
12+
</mat-tab>
13+
<mat-tab label="Second">Note how the video from the previous tab is still playing.</mat-tab>
14+
</mat-tab-group>

‎src/components-examples/material/tabs/tab-group-preserve-content/tab-group-preserve-content-example.ts

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import {Component} from '@angular/core';
2+
3+
/**
4+
* @title Tab group that keeps its content inside the DOM when it's off-screen.
5+
*/
6+
@Component({
7+
selector: 'tab-group-preserve-content-example',
8+
templateUrl: 'tab-group-preserve-content-example.html',
9+
})
10+
export class TabGroupPreserveContentExample {}

‎src/material-experimental/mdc-tabs/tab-body.scss

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,17 @@
2222
.mat-mdc-tab-group.mat-mdc-tab-group-dynamic-height &.mat-mdc-tab-body-active {
2323
overflow-y: hidden;
2424
}
25+
26+
// Usually the `visibility: hidden` added by the animation is enough to prevent focus from
27+
// entering the collapsed content, but children with their own `visibility` can override it.
28+
// This is a fallback that completely hides the content when the element becomes hidden.
29+
// Note that we can't do this in the animation definition, because the style gets recomputed too
30+
// late, breaking the animation because Angular didn't have time to figure out the target height.
31+
// This can also be achieved with JS, but it has issues when when starting an animation before
32+
// the previous one has finished.
33+
&[style*='visibility: hidden'] {
34+
display: none;
35+
}
2536
}
2637

2738
.mat-mdc-tab-body-content {

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,7 @@
6363
[position]="tab.position!"
6464
[origin]="tab.origin"
6565
[animationDuration]="animationDuration"
66+
[preserveContent]="preserveContent"
6667
(_onCentered)="_removeTabBodyWrapperHeight()"
6768
(_onCentering)="_setTabBodyWrapperHeight($event)">
6869
</mat-tab-body>

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

Lines changed: 52 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -666,6 +666,56 @@ describe('MDC-based MatTabGroup', () => {
666666

667667
expect(tabGroupNode.classList).toContain('mat-mdc-tab-group-inverted-header');
668668
});
669+
670+
it('should be able to opt into keeping the inactive tab content in the DOM', fakeAsync(() => {
671+
fixture.componentInstance.preserveContent = true;
672+
fixture.detectChanges();
673+
674+
expect(fixture.nativeElement.textContent).toContain('Pizza, fries');
675+
expect(fixture.nativeElement.textContent).not.toContain('Peanuts');
676+
677+
tabGroup.selectedIndex = 3;
678+
fixture.detectChanges();
679+
tick();
680+
681+
expect(fixture.nativeElement.textContent).toContain('Pizza, fries');
682+
expect(fixture.nativeElement.textContent).toContain('Peanuts');
683+
}));
684+
685+
it('should visibly hide the content of inactive tabs', fakeAsync(() => {
686+
const contentElements: HTMLElement[] = Array.from(
687+
fixture.nativeElement.querySelectorAll('.mat-mdc-tab-body-content'),
688+
);
689+
690+
expect(contentElements.map(element => element.style.visibility)).toEqual([
691+
'',
692+
'hidden',
693+
'hidden',
694+
'hidden',
695+
]);
696+
697+
tabGroup.selectedIndex = 2;
698+
fixture.detectChanges();
699+
tick();
700+
701+
expect(contentElements.map(element => element.style.visibility)).toEqual([
702+
'hidden',
703+
'hidden',
704+
'',
705+
'hidden',
706+
]);
707+
708+
tabGroup.selectedIndex = 1;
709+
fixture.detectChanges();
710+
tick();
711+
712+
expect(contentElements.map(element => element.style.visibility)).toEqual([
713+
'hidden',
714+
'',
715+
'hidden',
716+
'hidden',
717+
]);
718+
}));
669719
});
670720

671721
describe('lazy loaded tabs', () => {
@@ -1126,7 +1176,7 @@ class AsyncTabsTestApp implements OnInit {
11261176

11271177
@Component({
11281178
template: `
1129-
<mat-tab-group>
1179+
<mat-tab-group [preserveContent]="preserveContent">
11301180
<mat-tab label="Junk food"> Pizza, fries </mat-tab>
11311181
<mat-tab label="Vegetables"> Broccoli, spinach </mat-tab>
11321182
<mat-tab [label]="otherLabel"> {{otherContent}} </mat-tab>
@@ -1135,6 +1185,7 @@ class AsyncTabsTestApp implements OnInit {
11351185
`,
11361186
})
11371187
class TabGroupWithSimpleApi {
1188+
preserveContent = false;
11381189
otherLabel = 'Fruit';
11391190
otherContent = 'Apples, grapes';
11401191
@ViewChild('legumes') legumes: any;

‎src/material/tabs/tab-body.scss

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,15 @@
55
.mat-tab-group-dynamic-height & {
66
overflow: hidden;
77
}
8+
9+
// Usually the `visibility: hidden` added by the animation is enough to prevent focus from
10+
// entering the collapsed content, but children with their own `visibility` can override it.
11+
// This is a fallback that completely hides the content when the element becomes hidden.
12+
// Note that we can't do this in the animation definition, because the style gets recomputed too
13+
// late, breaking the animation because Angular didn't have time to figure out the target height.
14+
// This can also be achieved with JS, but it has issues when when starting an animation before
15+
// the previous one has finished.
16+
&[style*='visibility: hidden'] {
17+
display: none;
18+
}
819
}

‎src/material/tabs/tab-body.ts

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,9 @@ export class MatTabBodyPortal extends CdkPortalOutlet implements OnInit, OnDestr
9393
});
9494

9595
this._leavingSub = this._host._afterLeavingCenter.subscribe(() => {
96-
this.detach();
96+
if (!this._host.preserveContent) {
97+
this.detach();
98+
}
9799
});
98100
}
99101

@@ -149,6 +151,9 @@ export abstract class _MatTabBodyBase implements OnInit, OnDestroy {
149151
/** Duration for the tab's animation. */
150152
@Input() animationDuration: string = '500ms';
151153

154+
/** Whether the tab's content should be kept in the DOM while it's off-screen. */
155+
@Input() preserveContent: boolean = false;
156+
152157
/** The shifted index position of the tab body, where zero represents the active center tab. */
153158
@Input()
154159
set position(position: number) {

‎src/material/tabs/tab-config.ts

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,13 @@ export interface MatTabsConfig {
2929

3030
/** `tabindex` to be set on the inner element that wraps the tab content. */
3131
contentTabIndex?: number;
32+
33+
/**
34+
* By default tabs remove their content from the DOM while it's off-screen.
35+
* Setting this to `true` will keep it in the DOM which will prevent elements
36+
* like iframes and videos from reloading next time it comes back into the view.
37+
*/
38+
preserveContent?: boolean;
3239
}
3340

3441
/** Injection token that can be used to provide the default options the tabs module. */

‎src/material/tabs/tab-group.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,7 @@
5050
[position]="tab.position!"
5151
[origin]="tab.origin"
5252
[animationDuration]="animationDuration"
53+
[preserveContent]="preserveContent"
5354
(_onCentered)="_removeTabBodyWrapperHeight()"
5455
(_onCentering)="_setTabBodyWrapperHeight($event)">
5556
</mat-tab-body>

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

Lines changed: 52 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -665,6 +665,56 @@ describe('MatTabGroup', () => {
665665

666666
expect(tabGroupNode.classList).toContain('mat-tab-group-inverted-header');
667667
});
668+
669+
it('should be able to opt into keeping the inactive tab content in the DOM', fakeAsync(() => {
670+
fixture.componentInstance.preserveContent = true;
671+
fixture.detectChanges();
672+
673+
expect(fixture.nativeElement.textContent).toContain('Pizza, fries');
674+
expect(fixture.nativeElement.textContent).not.toContain('Peanuts');
675+
676+
tabGroup.selectedIndex = 3;
677+
fixture.detectChanges();
678+
tick();
679+
680+
expect(fixture.nativeElement.textContent).toContain('Pizza, fries');
681+
expect(fixture.nativeElement.textContent).toContain('Peanuts');
682+
}));
683+
684+
it('should visibly hide the content of inactive tabs', fakeAsync(() => {
685+
const contentElements: HTMLElement[] = Array.from(
686+
fixture.nativeElement.querySelectorAll('.mat-tab-body-content'),
687+
);
688+
689+
expect(contentElements.map(element => element.style.visibility)).toEqual([
690+
'',
691+
'hidden',
692+
'hidden',
693+
'hidden',
694+
]);
695+
696+
tabGroup.selectedIndex = 2;
697+
fixture.detectChanges();
698+
tick();
699+
700+
expect(contentElements.map(element => element.style.visibility)).toEqual([
701+
'hidden',
702+
'hidden',
703+
'',
704+
'hidden',
705+
]);
706+
707+
tabGroup.selectedIndex = 1;
708+
fixture.detectChanges();
709+
tick();
710+
711+
expect(contentElements.map(element => element.style.visibility)).toEqual([
712+
'hidden',
713+
'',
714+
'hidden',
715+
'hidden',
716+
]);
717+
}));
668718
});
669719

670720
describe('lazy loaded tabs', () => {
@@ -1072,7 +1122,7 @@ class AsyncTabsTestApp implements OnInit {
10721122

10731123
@Component({
10741124
template: `
1075-
<mat-tab-group>
1125+
<mat-tab-group [preserveContent]="preserveContent">
10761126
<mat-tab label="Junk food"> Pizza, fries </mat-tab>
10771127
<mat-tab label="Vegetables"> Broccoli, spinach </mat-tab>
10781128
<mat-tab [label]="otherLabel"> {{otherContent}} </mat-tab>
@@ -1081,6 +1131,7 @@ class AsyncTabsTestApp implements OnInit {
10811131
`,
10821132
})
10831133
class TabGroupWithSimpleApi {
1134+
preserveContent = false;
10841135
otherLabel = 'Fruit';
10851136
otherContent = 'Apples, grapes';
10861137
@ViewChild('legumes') legumes: any;

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

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -163,6 +163,14 @@ export abstract class _MatTabGroupBase
163163
@Input()
164164
disablePagination: boolean;
165165

166+
/**
167+
* By default tabs remove their content from the DOM while it's off-screen.
168+
* Setting this to `true` will keep it in the DOM which will prevent elements
169+
* like iframes and videos from reloading next time it comes back into the view.
170+
*/
171+
@Input()
172+
preserveContent: boolean;
173+
166174
/** Background color of the tab group. */
167175
@Input()
168176
get backgroundColor(): ThemePalette {
@@ -214,6 +222,7 @@ export abstract class _MatTabGroupBase
214222
this.dynamicHeight =
215223
defaultConfig && defaultConfig.dynamicHeight != null ? defaultConfig.dynamicHeight : false;
216224
this.contentTabIndex = defaultConfig?.contentTabIndex ?? null;
225+
this.preserveContent = !!defaultConfig?.preserveContent;
217226
}
218227

219228
/**

‎src/material/tabs/tabs-animations.ts

Lines changed: 30 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -23,26 +23,50 @@ export const matTabsAnimations: {
2323
} = {
2424
/** Animation translates a tab along the X axis. */
2525
translateTab: trigger('translateTab', [
26-
// Note: transitions to `none` instead of 0, because some browsers might blur the content.
27-
state('center, void, left-origin-center, right-origin-center', style({transform: 'none'})),
26+
state(
27+
'center, void, left-origin-center, right-origin-center',
28+
style({
29+
// Transitions to `none` instead of 0, because some browsers might blur the content.
30+
transform: 'none',
31+
// Ensures that the `visibility: hidden` from below is cleared.
32+
visibility: '',
33+
}),
34+
),
2835

2936
// If the tab is either on the left or right, we additionally add a `min-height` of 1px
3037
// in order to ensure that the element has a height before its state changes. This is
3138
// necessary because Chrome does seem to skip the transition in RTL mode if the element does
3239
// not have a static height and is not rendered. See related issue: #9465
33-
state('left', style({transform: 'translate3d(-100%, 0, 0)', minHeight: '1px'})),
34-
state('right', style({transform: 'translate3d(100%, 0, 0)', minHeight: '1px'})),
40+
state(
41+
'left',
42+
style({
43+
transform: 'translate3d(-100%, 0, 0)',
44+
minHeight: '1px',
45+
46+
// Normally this is redundant since we detach the content from the DOM, but if the user
47+
// opted into keeping the content in the DOM, we have to hide it so it isn't focusable.
48+
visibility: 'hidden',
49+
}),
50+
),
51+
state(
52+
'right',
53+
style({
54+
transform: 'translate3d(100%, 0, 0)',
55+
minHeight: '1px',
56+
visibility: 'hidden',
57+
}),
58+
),
3559

3660
transition(
3761
'* => left, * => right, left => center, right => center',
3862
animate('{{animationDuration}} cubic-bezier(0.35, 0, 0.25, 1)'),
3963
),
4064
transition('void => left-origin-center', [
41-
style({transform: 'translate3d(-100%, 0, 0)'}),
65+
style({transform: 'translate3d(-100%, 0, 0)', visibility: 'hidden'}),
4266
animate('{{animationDuration}} cubic-bezier(0.35, 0, 0.25, 1)'),
4367
]),
4468
transition('void => right-origin-center', [
45-
style({transform: 'translate3d(100%, 0, 0)'}),
69+
style({transform: 'translate3d(100%, 0, 0)', visibility: 'hidden'}),
4670
animate('{{animationDuration}} cubic-bezier(0.35, 0, 0.25, 1)'),
4771
]),
4872
]),

‎src/material/tabs/tabs.md

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,15 @@ duration can be configured globally using the `MAT_TABS_CONFIG` injection token.
8484
"file": "tab-group-animations-example.html",
8585
"region": "slow-animation-duration"}) -->
8686

87+
### Keeping the tab content inside the DOM while it's off-screen
88+
By default the `<mat-tab-group>` will remove the content of off-screen tabs from the DOM until they
89+
come into the view. This is optimal for most cases since it keeps the DOM size smaller, but it
90+
isn't great for others like when a tab has an `<audio>` or `<video>` element, because the content
91+
will be re-initialized whenever the user navigates to the tab. If you want to keep the content of
92+
off-screen tabs in the DOM, you can set the `preserveContent` input to `true`.
93+
94+
<!-- example(tab-group-preserve-content) -->
95+
8796
### Accessibility
8897
`MatTabGroup` and `MatTabNavBar` implement different interaction patterns for different use-cases.
8998
You should choose the component that works best for your application.

0 commit comments

Comments
 (0)