Changing tabs while parent div is animating into the page causes the content to disappear.

[bdonald25]

Reproduction

Here is a StackBlitz to reproduce the issue: https://stackblitz.com/edit/angular-yqxzaq

Steps to reproduce:

1. Animate a div into the page that contains material tab component.
2. Change tabs as this parent div is animating into the page.
3. Wait for the last div to finish animating into the page.
4. The tab you switched now has no content.

Expected Behavior

If you change tabs while the parent div is animating into the page then the content should not disappear.

Actual Behavior

If you change tabs while the tabs are animating into the page then the content does disappear and is gone until you refresh the page.

Environment

• Angular: 8.0.0
• CDK/Material: 8.0.0
• Browser(s): Firefox developer edition 68.0b7 (64-bit), Chrome 75.0.3770.80
• Operating System: Windows

[jelbourn]

(revisiting older issues as part of a triaging fix-it)

I spent a while looking at this and can confirm it's happening. I can also confirm that it's totally baffling and I have no idea what's happening. I suspect this is actually some issue with @angular/animations, but can't really do a deep dive on that right now.

I also checked whether this happens with our new MDC-based tabs in material-experimental, and it does.

[crisbeto]

This should no longer be an issue, because we've moved Material away from the @angular/animations module in 19.2.0.

[angular-automatic-lock-bot[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.}