Skip to content

Commit 7e3a9df

Browse files
authored
fix(material/stepper): content not visibile on first navigation when nested in tabs (#25930)
Fixes an issue where the content of a stepper that is nested inside of a `<mat-tab-group>` 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.
1 parent e80929d commit 7e3a9df

File tree

1 file changed

+18
-0
lines changed

1 file changed

+18
-0
lines changed

src/material/stepper/stepper.scss

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -133,6 +133,15 @@
133133
height: 0;
134134
overflow: hidden;
135135
}
136+
137+
// Used to avoid an issue where when the stepper is nested inside a component that
138+
// changes the `visibility` as a part of an Angular animation, the stepper's content
139+
// stays hidden (see #25925). The value has to be `!important` to override the incorrect
140+
// `visibility` from the animations package. This can also be solved using `visibility: visible`
141+
// on `.mat-horizontal-stepper-content`, but it can allow tabbing into hidden content.
142+
&:not(.mat-horizontal-stepper-content-inactive) {
143+
visibility: inherit !important;
144+
}
136145
}
137146

138147
.mat-horizontal-content-container {
@@ -179,6 +188,15 @@
179188
.mat-vertical-stepper-content {
180189
overflow: hidden;
181190
outline: 0;
191+
192+
// Used to avoid an issue where when the stepper is nested inside a component that
193+
// changes the `visibility` as a part of an Angular animation, the stepper's content
194+
// stays hidden (see #25925). The value has to be `!important` to override the incorrect
195+
// `visibility` from the animations package. This can also be solved using `visibility: visible`
196+
// on `.mat-vertical-stepper-content`, but it can allow tabbing into hidden content.
197+
&:not(.mat-vertical-stepper-content-inactive) {
198+
visibility: inherit !important;
199+
}
182200
}
183201

184202
.mat-vertical-content {

0 commit comments

Comments
 (0)