Angular Material Table Detail Rows expanding on their own when changing tabs

Viewed 976

I have a Mat-Table with detail rows in a Mat-Tab. The table works as desired until I choose another tab. When I switch back to the tab with the table, all of the detail rows are expanded.

<ng-container matColumnDef="expandedDetail">
    <mat-cell *matCellDef="let detail" style="padding-right: 0px;">
        <div class="mat-elevation-z8" fxFlex>
            <app-plants-list [company]="detail.element" [plants]="getPlants(detail.element.compCode)"
                [departments]="getDepartments(detail.element.compCode)" [areas]="getAreas(detail.element.compCode)"
                [jobs]="getJobs(detail.element.compCode)" [canManageOrganizations]="canManageOrganizations">
            </app-plants-list>
        </div>
    </mat-cell>
</ng-container>


<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;" matRipple class="element-row"
    [class.expanded]="expandedElement == row" (click)="toggleDetailRow(row)"></mat-row>
<mat-row *matRowDef="let row; columns: ['expandedDetail']; when: isExpansionDetailRow"
    [@detailExpand]="row.element == expandedElement ? 'expanded' : 'collapsed'" style="overflow: hidden">
</mat-row>

As you can see in the code, the detail row should not be expanded unless it matches the property 'expandedElement'.

Am I missing something that may be occurring with the HTML when switching tabs?

1 Answers

After some more digging, I found this issue on GitHub that referred me to this StackBlitz, which helped me solve the problem.

I had my detail rows built using a design from prior to version 6, where detail rows were not supported. Now there is support for multiTemplateDataRows. The old way apparently didn't play nice with mat-tab (I'm sure the same problem would arise if we were using an expansion panel or similar).

Related