Covalent: Stepper fails when deactivated in a hidden tab (nightly)

[jawadst]

Do you want to request a feature or report a bug?

Bug report

Screenshots or link to CodePen/Plunker/JSfiddle

Plunker that works fine with the latest release: http://plnkr.co/edit/R14aKMeIVOPJMDvAZWp3?p=preview
The same code fails when running with the nightly build. The Nightly Plunkr doesn't load so I am not able to provide it but a sample project is attached:
test-covalent.zip

What is the expected behavior?

When calling step.active = false, the step should be set to "inactive" state and the height of the step body should be set to 0.

Which version of Angular and Material, and which browser and OS does this issue affect?

Tested with Angular 4 and covalent nightly. Chrome / Windows.
It works fine with the latest release Covalent running Angular 2.

Other information

(e.g. detailed explanation, stacktraces, related issues, suggestions how to fix)

The setup is the following:

• Covalent nightly
• Tab group with two tabs.
• The hidden tab has a TdSteps and TdStep in it.
• The TdStep is set to [active]="true" and [disabled]="false" in the template

In ngOnInit, there is an async process called (setTimeout, HTTP call with promise/observer, etc.). Once the async process is done, step.active = false is called.
It fails with the following error:
ERROR DOMException: Failed to execute 'animate' on 'Element': Partial keyframes are not supported. at WebAnimationsPlayer._triggerWebAnimation (http://localhost:4200/vendor.bundle.js:46190:35) at WebAnimationsPlayer.init (http://localhost:4200/vendor.bundle.js:46173:29) at InjectableAnimationEngine.DomAnimationEngine._queuePlayer (http://localhost:4200/vendor.bundle.js:45464:16) at InjectableAnimationEngine.DomAnimationEngine.animateTransition (http://localhost:4200/vendor.bundle.js:45379:14) at InjectableAnimationEngine.DomAnimationEngine.setProperty (http://localhost:4200/vendor.bundle.js:45250:18) at AnimationRenderer.setProperty (http://localhost:4200/vendor.bundle.js:114878:26) at DebugRenderer2.setProperty (http://localhost:4200/vendor.bundle.js:13472:23) at setElementProperty (http://localhost:4200/vendor.bundle.js:9747:19) at checkAndUpdateElementValue (http://localhost:4200/vendor.bundle.js:9666:13) at checkAndUpdateElementInline (http://localhost:4200/vendor.bundle.js:9600:24) at checkAndUpdateNodeInline (http://localhost:4200/vendor.bundle.js:12293:23) at checkAndUpdateNode (http://localhost:4200/vendor.bundle.js:12268:16) at debugCheckAndUpdateNode (http://localhost:4200/vendor.bundle.js:12897:59) at debugCheckRenderNodeFn (http://localhost:4200/vendor.bundle.js:12876:13) at Object.eval [as updateRenderer] (ng:///CovalentStepsModule/TdStepBodyComponent.ngfactory.js:186:5)

It does not fail when the TdSteps component is directly visible on the page and not hidden in a tab.

[jawadst]

I tested with 1.0.0-beta.3 and the issue is still there. It works fine with Firefox though so it seems to be Chrome-specific.

[jawadst]

Did some more investigation and it looks like the height of the .td-step-content-wrapper (in the step-body component) element is not computed when running the animation tdCollapse.

Here are the animation keyframes I get from the debugger:
[{ "height": "", "display": "", "overflow": "hidden", "easing": "ease-in", "offset": 0 }, { "height": "0", "display": "", "overflow": "hidden", "offset": 1 }]

The height of the first keyframe is empty whereas it should be the actual height of the element as it's the start of the transition 0 => 1.

Found a bunch of bug reports somewhat related on the Angular issues tracker:

• https://github.com/angular/angular/issues/9402
• https://github.com/angular/angular/issues/13395
• https://github.com/angular/angular/issues/9754

This might not be related to Covalent at all so I'll try to replicate the issue with just Angular and Material and report there if it also breaks.

[jawadst]

I could reproduce the issue with Material tabs only and without Covalent (using the same transition from auto height to 0 on a simple div). Closing this ticket and reporting to the Material team (https://github.com/angular/material2/issues/3968).