Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

bug([mat-table]): mat-tab-group messes up expandable rows in table

See original GitHub issue

Reproduction

Stackblitz project: https://stackblitz.com/edit/github-itepdn To see the bug, just open the app, switch to the second tab and go back to the first one. The bug only shows with enabled Ivy compiler.

Expected Behavior

Switching tabs in mat-tab-group shouldn’t affect the expanded rows in the table.

Actual Behavior

All rows in the table are expanded after switching to the second tab and back. This shouldn’t be possible as normally the table allows only for one expanded row at a time.

Environment

Angular: 9.1.0
CDK/Material: 9.2.0
Browser(s): Chrome
Operating System (e.g. Windows, macOS, Ubuntu): Windows and Ubuntu
Enabled Ivy

Issue Analytics

State:
Created 3 years ago
Comments:7 (1 by maintainers)

Top GitHub Comments

2reactions

andrewseguincommented, May 26, 2020

This is an issue related to how Angular handles animations. To resolve this, you can lazily load your tab content as a workaround.

https://stackblitz.com/edit/github-itepdn-3sq67o?file=src/app/app.component.html

    <mat-tab label="Table">
       <ng-template matTabContent>
         <app-table></app-table>
       </ng-template>
    </mat-tab>

2reactions

raibait-merixcommented, Apr 2, 2020

I face the same issue. Manually disabling Ivy in tsconfig.json helps, but obviously thats not a solution.

Top Results From Across the Web

mat-tab-group messes up expandable rows in table ... - GitHub

The bug only shows with enabled Ivy compiler. Expected Behavior Switching tabs in mat-tab-group shouldn't affect the expanded rows in the table.

Expandable row in material table , all rows expanded when ...

I wanted to keep the behaviour I have, I just wanted to remove the bug of expanding rows whenever I click another tab.....

A Table with Expandable and Collapsible Rows Using Angular

In this article, I will walk you through how I created a table in Angular that has expandable and collapsible rows. My motivation...

Table Creator | Figma Community

Create custom-styled tables which can be easily resized, edited and automatically adjust to content. Control the design of your tables by modifying the ......

Tabs - Angular Material

Angular Material tabs organize content into separate views where only one view can be visible at a time. Each tab's label is shown...