From 5252b8b746a239fe6012ac4c43244e50c034efbf Mon Sep 17 00:00:00 2001 From: Kharazian Date: Tue, 15 Aug 2023 23:03:13 -0400 Subject: [PATCH] fix(material/table): simultaneous row expansion issue in mattab with nested table Resolved a bug causing simultaneous row expansion in a MatTab when a nested MatTable component with expandable rows was used. The problem stemmed from animations triggered by the parent's visibility set to 'hidden.' Solution: Incorporated void state within animations to reset them after eraseStyles function execution, ensuring consistent row expansion behavior within MatTabs. Fixes #27560 --- .../table-expandable-rows/table-expandable-rows-example.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components-examples/material/table/table-expandable-rows/table-expandable-rows-example.ts b/src/components-examples/material/table/table-expandable-rows/table-expandable-rows-example.ts index 27f8278cc003..aa8de1f17e3f 100644 --- a/src/components-examples/material/table/table-expandable-rows/table-expandable-rows-example.ts +++ b/src/components-examples/material/table/table-expandable-rows/table-expandable-rows-example.ts @@ -14,7 +14,7 @@ import {MatTableModule} from '@angular/material/table'; templateUrl: 'table-expandable-rows-example.html', animations: [ trigger('detailExpand', [ - state('collapsed', style({height: '0px', minHeight: '0'})), + state('collapsed,void', style({height: '0px', minHeight: '0'})), state('expanded', style({height: '*'})), transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')), ]),