Skip to content

Commit c08e3f1

Browse files
authored
fix(material/form-field): don't block click on prefix/suffix when disabled (#25987)
1 parent 0c6b4be commit c08e3f1

File tree

1 file changed

+6
-3
lines changed

1 file changed

+6
-3
lines changed

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

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -63,19 +63,22 @@
6363
width: 100%;
6464
}
6565

66-
// The MDC text-field should stretch to the width of the host `<mat-form-field>` element.
67-
// This allows developers to control the width without needing custom CSS overrides.
6866
.mat-mdc-text-field-wrapper {
67+
// The MDC text-field should stretch to the width of the host `<mat-form-field>` element.
68+
// This allows developers to control the width without needing custom CSS overrides.
6969
width: 100%;
7070
}
7171

72-
// Vertically center icons.
7372
.mat-mdc-form-field-icon-prefix,
7473
.mat-mdc-form-field-icon-suffix {
74+
// Vertically center icons.
7575
align-self: center;
7676
// The line-height can cause the prefix/suffix container to be taller than the actual icons,
7777
// breaking the vertical centering. To prevent this we set the line-height to 0.
7878
line-height: 0;
79+
// MDC applies `pointer-events: none` to the `.mdc-text-field--disabled`. This breaks clicking on
80+
// prefix and suffix buttons, so we override `pointer-events` to always allow clicking.
81+
pointer-events: auto;
7982
}
8083

8184
// The prefix/suffix needs a little extra padding between the icon and the infix. Because we need to

0 commit comments

Comments
 (0)