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

[crisbeto]

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.

[jelbourn]

I can't think of anything strictly better than preserveContent. "persist" is an alternative, but I don't see much of a distinction between them.

Could you update the docs with a section / example for this?

[crisbeto]

I've added docs and a live example @jelbourn. Can you take another look?

[jelbourn]

LGTM

[calvinjc]

What is preventing this PR from being merged? This fix was labeled "merge ready" a year ago. Please merge or provide an update.

[jelbourn]

Looks like there was just one screenshot diff affecting this.

@crisbeto I coincidentally got two requests related to this feature from Googlers this week, so I'll try to push it forward. However, what do you think of changing the input name to preserveAfterLoad to be slightly more explicit?

[crisbeto]

I'm not super attached to the name, but having the load in there sounds to me like we're the ones doing the loading.

[kseamon]

Pretty sure this will work fine but please also include a unit test with lazy-rendered tab contents - we'd want it to retain it's lazy rendering but keep the rendered content alive after tabbing away.

[jelbourn]

@crisbeto fair enough, I don't feel strongly either way

[luiz-shonen]

Hello! I'm needing this feature a lot. Is it going to be merged?

[calvinjc]

@jelbourn, @crisbeto it looks like there was an attempt to push this forward after my last comment, but it looks like it has stalled again. There hasn't been any movement or new comments in a few weeks. It sounds like this would help a lot of people. Can you please get this merged in?

[jelbourn]

@crisbeto this might be a good first issue for you to try to land directly in Google

[DaleMatthews]

This is one of the bigger lacking features that most popular libraries' tab components have. It is essential when working with iframe content. Could this get merged? Thanks in advance ng team!!

[btvanhooser]

Looks like this is good to go and my team would really like this. Are there plans to merge this?

[kseamon]

Per our discovery with visibility getting overridden inside of expansion panels, please make sure to use

visibility: hidden !important

[crisbeto]

Pushed a similar fix to the expansion panel that adds display: none once the tab is hidden.

[PandaCodeAng]

i also need this feature thank you

[wagnermaciel]

@crisbeto This had some conflicts with another PR that I merged in earlier today

[crisbeto]

I've rebased the PR.

[ddolson2541]

I'm hoping this is close to being merged? Without the ability to retain an iframe in the DOM, my project simply won't work with tabs. Thanks.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}