[MDCTextField] Input background color problem when autofilled and top border is visible on label background when mdc-floating-label--float-above used

[osmankrtmz]

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

1. Go to 'https://codepen.io/Osmankrtmz/pen/NWGONRm'
2. Click on 'E-mail' field, if you have filled any email field before, there should be list of items that can be selected.
3. Select one of them
4. See left and right edge still white.

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:

Software	Version(s)
MDC Web	6.0.0
Browser	Chrome 81.0.4044.138
Operating System	Windows 10 64 bit

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

[asyncliz]

Thanks for the issue! We're investigating this internally as well

[KajdeMunter]

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;
}

[MarcoTroost]

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