Expansion Table auto expanded when used within tabs

[kirapoetica]

What is the expected behavior?

When I put an expansion table in a tabs component, all the rows in the table are collapsed.

What is the current behavior?

When I put an expansion table in a tabs component, all the rows in the table are auto expanded. This behavior occurs when I change the items of the tabs component.

What are the steps to reproduce?

Providing a StackBlitz reproduction is the best way to share your issue.
StackBlitz starter: https://goo.gl/wwnhMV
https://angular-material2-issue-g7s4ge.stackblitz.io/

Click on "Table", Click on "Form Field", click a second time on "Table" : the expansion table is auto expanded

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Same that stackblitz link

Is there anything else we should know?

[andrewseguin]

I did not see the rows auto-expanded, but it does look like they are not getting set to height: 0px because that style is overridden by this default style:

tr.mat-footer-row, tr.mat-row {
    height: 48px;
}

To fix that, just add more specificity to your style, e.g.:

table tr.example-detail-row {
    height: 0;
}

https://stackblitz.com/edit/angular-material2-issue-gvxf6i?file=styles.scss

[kirapoetica]

Thanks @andrewseguin It's strange that you did not see the behavior because it happens again. Try to switch between Table item and another many times. The first time you choose Table item it's ok, but the second time all the row are expanded.

[andrewseguin]

After going back and forth a few times, I managed to reproduce the issue

[BerradaOmar]

I had the same issue ! You should have your table in a seperate component, and then put the component inside a div (that div is inside your mat-tab ) and it will work. Something like this :

[BerradaOmar]

@learwebit here's an example i created on stackblitz https://stackblitz.com/edit/tabs-expanded-table?embed=1&file=src/index.html

[NayanaThomas]

Thank you @BerradaOmar. Adding the component inside a div fixed the issue.