From 378889ef002a054bcfcde1bbe9c1b05f3d4782f9 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Mon, 7 Nov 2022 09:31:25 +0100 Subject: [PATCH] fix(material/stepper): content not visibile on first navigation when nested in tabs Fixes an issue where the content of a stepper that is nested inside of a `` becomes invisible after the first navigation. This appears to be some sort of a bug where the `visibility: inherit` that we have on the stepper doesn't get recalculated so it stays `hidden`. Fixes #25925. --- src/material/stepper/stepper.scss | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/src/material/stepper/stepper.scss b/src/material/stepper/stepper.scss index b920468390a4..41c756947198 100644 --- a/src/material/stepper/stepper.scss +++ b/src/material/stepper/stepper.scss @@ -133,6 +133,15 @@ height: 0; overflow: hidden; } + + // Used to avoid an issue where when the stepper is nested inside a component that + // changes the `visibility` as a part of an Angular animation, the stepper's content + // stays hidden (see #25925). The value has to be `!important` to override the incorrect + // `visibility` from the animations package. This can also be solved using `visibility: visible` + // on `.mat-horizontal-stepper-content`, but it can allow tabbing into hidden content. + &:not(.mat-horizontal-stepper-content-inactive) { + visibility: inherit !important; + } } .mat-horizontal-content-container { @@ -179,6 +188,15 @@ .mat-vertical-stepper-content { overflow: hidden; outline: 0; + + // Used to avoid an issue where when the stepper is nested inside a component that + // changes the `visibility` as a part of an Angular animation, the stepper's content + // stays hidden (see #25925). The value has to be `!important` to override the incorrect + // `visibility` from the animations package. This can also be solved using `visibility: visible` + // on `.mat-vertical-stepper-content`, but it can allow tabbing into hidden content. + &:not(.mat-vertical-stepper-content-inactive) { + visibility: inherit !important; + } } .mat-vertical-content {