mdc-text-field doesn't play nicely with Chrome autofill

[nfriend]

What MDC Web Version are you using?

0.35.2

What browser(s) is this bug affecting?

Chrome Version 66.0.3359.181 (Official Build) (64-bit)

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.181 Safari/537.36

What OS are you using?

Windows 10 Pro, Version 10.0.15063 Build 15063

What are the steps to reproduce the bug?

Build a form that includes a mdc-text-field. Submit the form using Chrome. Open the form again, and enter the same information, allowing Chrome to autofill the form values.

What is the expected behavior?

The autofill style should not obscure the text field control.

What is the actual behavior?

The yellow autofill background that is applied to the controls obscures the outline and the floating text label. Here is a screenshot demonstrating this behavior:

For reference, here is what the form looks like without the autofill styling applied:

[kfranqueiro]

I think at one point we also observed some funny behavior where it affected the floating label size or position. Not sure yet how much control we have over the autofill behavior, but we definitely want to track this.

[AreaInsights]

Can it be fixed with .mdc-text-field__input:-webkit-autofill { //override }?
I tried this but could not get it working.

[matthinea]

This works for me:

input {
  -webkit-box-shadow: 0 0 0 30px white inset !important;
}

Instead of input I had a more specific selector, so you can change that as you see fit.

[nfriend]

@mnd-dsgn - That CSS snippet does remove the yellow background, but it also breaks the overall appearance of the control. Here's a non-autofilled input element without your CSS snippet applied:

And here's what it looks like after adding your CSS rule:

[aminNazarii]

@nfriend this is useful article
https://css-tricks.com/snippets/css/change-autocomplete-styles-webkit-browsers/

[oste]

thanks for the link @aminNazarii ... in the comments there are a couple of good solutions.

The first screen shot is a fix with this css

.mdc-floating-label {
    z-index: 1;
}

input:focus {
  outline: none;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  background-clip: content-box;
}

without the z-index on .mdc-floating-label you get the second screenshot so that's important.

The third screenshot uses this other solution

@-webkit-keyframes autofill {
    to {
        background: transparent;
    }
}

input:-webkit-autofill {
    -webkit-animation-name: autofill;
    -webkit-animation-fill-mode: both;
}

Take your pick! leaning towards leaving a bit of the yellow as an indicator. Maybe the MCW team can incorporate either of these? Or maybe just add the z-index @kfranqueiro

1st screenshot

2nd screenshot with z-index issue

3rd screenshot using keyframe

[oste]

note: I think the first screenshot would probably be best without the white padding. Leaving the yellow indicator that chrome is autofilling seems like a good choice but that white padding is a bit off aesthetically.

[neoGeneva]

I had a quick attempt at fixing this based on what @oste suggested, and setting the z-index of the input to auto solves the issue for me in Chrome 71.0.3578.98 (64-bit)

I'm also using MDC 0.42.0, so I think that might be a factor in why this works, I think that inputs z-index is more important in 0.35.2?

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    z-index: auto !important;
}

Results:

[boimar]

z-index does not provide smooth results. The fix that works best for me is to wrap the <input> in an extra <div> and change the padding. The result is that the <input> will be smaller and then the autocomplete will fit inside the outline and work as intended.

Here is example HTML:

<div class="text-field-container">
  <div class="mdc-text-field mdc-text-field--outlined">
    <div class="input-container">
      <input type="email" id="email" class="mdc-text-field__input">
    </div>
    <div class="mdc-notched-outline">
      <div class="mdc-notched-outline__leading"></div>
      <div class="mdc-notched-outline__notch">
        <label for="email" class="mdc-floating-label">Email Address</label>
      </div>
      <div class="mdc-notched-outline__trailing"></div>
    </div>
  </div>
</div>

Here is example SASS for above HTML:

.text-field-container {
  > .mdc-text-field {
    width: 100%;

    > .input-container {
      width: 100%;
      padding: 4px 2px 2px 2px;

      > .mdc-text-field__input {
        padding: 8px 14px 12px 14px;
      }
    }
  }
}