Open osmankrtmz opened 4 years ago
Thanks for the issue! We're investigating this internally as well
Temporary fix (scss):
.mdc-text-field {
/*
webkit-autofill will not fill the entire field because of padding on the parent label element.
For now; we remove padding on the parent and add it to the input field (and add margin to pre- and suffixes)
*/
padding: 0;
&__input {
padding: 0 16px;
}
&__affix {
&--prefix {
margin-left: 16px;
}
&--suffix {
margin-right: 16px;
}
}
Also make sure you have
.mdc-text-field__input:-webkit-autofill {
z-index: auto !important;
}
Hi osmankrtmz,
I've encountered the exact same thing while redesigning our loginpage.
Place the input before the span with “mdc-notched-outline” (this way one can utilize tilde ~ for modifying underlying nodes if the input-parameters change). Then add some css:
.mdc-text-field__input {
&:-webkit-autofill {
~ .mdc-notched-outline {
.mdc-notched-outline__leading,
.mdc-notched-outline__trailing {
box-shadow: -16px 0 0 0 inset rgb(232, 240, 254);
}
.mdc-notched-outline__notch {
box-shadow: 4px 0 0 0 inset rgb(232, 240, 254);
}
}
}
N.B. color is the lightblue of Chrome.
Full explanation: https://medium.com/@marco-troost/optimizing-material-design-autofilled-outlined-textfields-while-retaining-usability-45b0958b4cbf
Bug report
When mdc-text-field__input has autofilled by browser saved username and passwords, background becomes light blue (on chrome) as usual. But left and right edge background of mdc-text-field remain same color (white). (see picture). For Firefox it seems normal since there is no autofill background color.
Another problem about autofill is; when mdc-floating-label--float-above used and autofilled by browser, top border is visible on background of floating label.
Please see picture.
Steps to reproduce
Actual behavior
When mdc-text-field__input has autofilled by browser saved username and passwords, background becomes light blue (on chrome) as usual. But left and right edge background of mdc-text-field remain same color (white). (see picture). For Firefox it seems normal since there is no autofill background color.
Another problem about autofill is; when mdc-floating-label--float-above used and autofilled by browser, top border is visible on background of floating label.
Expected behavior
When autofilled by browser, all background of mdc-text-field should be filled, or at least left and right edge also should become the same color with browser fill color.
Background of floating label should not be transparent, or top border shouldnt be visible on notch.
Screenshots
Your Environment:
Additional context
I'm not sure if it is a bug or I'm doing something wrong. Please check and inform me about a possible solution (even temporary) before fixing bug.
Possible solution