Components: Mat-Stepper showing all steps when used in Tabs

[Stexxen]

Bug, feature request, or proposal:

Bug in mat-vertical-stepper

What is the expected behavior?

On the 1st Tab, the bodies of the 2nd and subsequent Steps should not be visible
On the 2nd tab, the Bodies of the 2nd and subsequent steps should not be visible.

What is the current behavior?

On the 1st Tab, the bodies of the 2nd and subsequent Steps are not visible as expected

On the 2nd tab, the 2nd and subsequent steps are visible

What are the steps to reproduce?

https://stackblitz.com/edit/angular-tcbhuy

Click Tab2 or Tab3

The steps are only hidden on the 1st tab (Tab1).

[Stexxen]

On the 1st Tab, a hidden step has the following HTML

On the 2nd Tab, the same step has the following HTML

Note the lack of style="height: 0px; visibility: hidden;"

[primissus]

Did you find any solution or any workaround?

[divyav17]

https://stackblitz.com/edit/angular-mat-stepper-in-mat-tab-group?file=app%2Fstepper.component.ts

Workaround using ngIf

[vip20]

I am trying to use mat-stepper and need this actually as a feature. Open all steps and close all steps.

[bijanmmarkes]

This is also a functionality I need, to have them all expanded at one, simply to use the design on the left. while having custom

I am trying to use mat-stepper and need this actually as a feature. Open all steps and close all steps.

I also need mat-stepper to have all steps expanded at once as a feature.

[mantsch]

Heres a quick and dirty css fix. Prevents opening all stepper contents when switching between tabs.

::ng-deep [aria-selected='false'] + .mat-vertical-content-container > .mat-vertical-stepper-content { display: none !important; }
edit: changed to prod selector

[vilbara]

@mantsch this won't work with PROD-build as ng-reflect-* properties are not available.

[mmalerba]

This has been fixed, as demonstrated in this updated stackblitz https://stackblitz.com/edit/angular-tcbhuy-xx2aco?file=main.ts

[SK-Commit]

I still get the bug, after deleting node_modules, package-lock.json, and updating package.json to newest angular versions of all packages in a fresh project.

Note: The project is generated through the generator: "NGX-Rocket", but doesn't seem to be where the error comes from.

Can be seen and tested here:
https://github.com/SK-Commit/angular-stepper-tabs-bug

Clone project -> npm install -> npm start -> go to localhost:4200

[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._}