Open thw0rted opened 3 years ago
In the built @angular/material/_theming.scss
I see @mixin mat-input-color(...)
which sets the disabled text color for the input. I think this is an easy fix, just changing the selector for the .mat-input-element:disabled
rule to include .mat-form-field-disabled .mat-form-field-suffix
(and probably -prefix
too, now that I look at the spec). I'm just not sure what actual source file the mixin comes from -- the literal mat-input-color
doesn't turn up anything in the repository.
Confirmed that this still seems to be an issue in the MDC-based form-field as well.
Any updated on this? The issue still happens.
Any updates on this?
Reproduction
Open this StackBlitz and toggle the Disabled state with the checkbox.
Expected Behavior
Per the Text Field spec, under "Outlined text field with suffix text", a suffix in a disabled text field should use the same font (weight / color / opacity) as the wrapped input element.
(In the image from the spec, "55" is the input text and "/100" is the suffix.)
Actual Behavior
The input text is light gray, to indicate that the input is disabled, but the suffix styling does not change, so it doesn't match the input text.
Environment
Note
I also see that in all the suffix examples where the input is not disabled, the suffix is styled slightly lighter than the input text. As you can see in the StackBlitz, the default suffix is exactly the same as the input text. The spec doesn't explicitly require this, as far as I can see, so maybe it's just a suggestion?