bug(material/tabs): Material Tabs and Router Animation

angular / components

Component infrastructure and Material Design components for Angular

https://material.angular.io

MIT License

24.35k stars 6.74k forks source link

bug(material/tabs): Material Tabs and Router Animation #22946

Open keved93 opened 3 years ago

keved93 commented 3 years ago

Reproduction

StackBlitz: https://stackblitz.com/edit/angular-ivy-mdjz31

Steps to reproduce:

Click button "Page 2"

Expected Behavior

The label and content of the tabs should remain visible during the router animation.

Actual Behavior

The label and content are removed during the router animation

Environment

Angular: v11, v12
CDK/Material: v11, v12
Browser(s): Chrome, Safari
Operating System (e.g. Windows, macOS, Ubuntu): all

jelbourn commented 3 years ago

@crisbeto with your knowledge of angular/animations, do you know why the labels/content of the animating content there would be missing? I don't know if I understand what's going on under the hood well enough to say, but my hunch would be that it has to do with change detection not being run when one might expect it to?

crisbeto commented 3 years ago

What I think is going on here is that the portal that we use for the mat-tab-label directive gets detached immediately in ngOnDestroy and it doesn't wait for the exit animation to finish. We've had similar issue reports about mat-table in the past. In this particular case, it can be worked around by using the label input to set the tab label. See https://stackblitz.com/edit/angular-ivy-ppi84e?file=src%2Fapp%2Ftabs%2Ftabs.component.html.