From ecfe46726dfe02a4ff4438e3308f9991b849ea34 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Wed, 12 Jul 2023 09:10:10 +0200 Subject: [PATCH] fix(material/expansion): panel content visible when placed inside a hidden parent The expansion panel was setting `visibility: visible` on the content which meant that it would be visible when placed inside of a parent that is `visibility: hidden`. These changes resolve the issue by clear the `visibility` instead. Fixes #27436. --- src/material/expansion/expansion-animations.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/material/expansion/expansion-animations.ts b/src/material/expansion/expansion-animations.ts index 7557863ef554..2bbfe8d9d950 100644 --- a/src/material/expansion/expansion-animations.ts +++ b/src/material/expansion/expansion-animations.ts @@ -56,7 +56,10 @@ export const matExpansionAnimations: { /** Animation that expands and collapses the panel content. */ bodyExpansion: trigger('bodyExpansion', [ state('collapsed, void', style({height: '0px', visibility: 'hidden'})), - state('expanded', style({height: '*', visibility: 'visible'})), + // Clear the `visibility` while open, otherwise the content will be visible when placed in + // a parent that's `visibility: hidden`, because `visibility` doesn't apply to descendants + // that have a `visibility` of their own (see #27436). + state('expanded', style({height: '*', visibility: ''})), transition( 'expanded <=> collapsed, void => collapsed', animate(EXPANSION_PANEL_ANIMATION_TIMING),