Skip to content

Commit 79b447e

Browse files
committed
fix(material/form-field): ensure same stacking context as container (#28713)
When `will-change` was removed in #27251, the form field lost its implicit stacking context which means that some of its descendants may be stacked on top of the container. These changes add an explicit `z-index` on the container to resolve the issue. Fixes #28708. (cherry picked from commit ce9a395)
1 parent 36d82d8 commit 79b447e

File tree

1 file changed

+4
-1
lines changed

1 file changed

+4
-1
lines changed

src/material/form-field/form-field.scss

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -127,6 +127,9 @@ $_icon-prefix-infix-padding: 4px;
127127
// The MDC text-field should stretch to the width of the host `<mat-form-field>` element.
128128
// This allows developers to control the width without needing custom CSS overrides.
129129
width: 100%;
130+
// Avoids stacking issues due to the absolutely-positioned
131+
// descendants of the form field (see #28708)
132+
z-index: 0;
130133
}
131134

132135
.mat-mdc-form-field-icon-prefix,
@@ -139,7 +142,7 @@ $_icon-prefix-infix-padding: 4px;
139142
// MDC applies `pointer-events: none` to the `.mdc-text-field--disabled`. This breaks clicking on
140143
// prefix and suffix buttons, so we override `pointer-events` to always allow clicking.
141144
pointer-events: auto;
142-
// Needs a z-index to ensure it's on top of other content clickable. See #27043.
145+
// Needs a z-index to ensure it's on top of other clickable content. See #27043.
143146
position: relative;
144147
z-index: 1;
145148

0 commit comments

Comments
 (0)