[TextField] bug(text-field, notched-outline): Chrome autofill doesn't work with outline variant

Hi,

there is still a problem with autofilling of credentials in Chrome, when the outlined variant of textfields is used:

There was already an issue (#137) for the non-outlined variant, which was solved in #180:

https://github.com/material-components/material-components-web/blob/70672f12ff19591c53fef6876c059c854f9cb816/packages/mdc-textfield/mdc-text-field.scss#L134-L138 (Please note that the filename has changed after the PR.)

As in the outline variant more classes and combinations of classes are involved for the filled state, there’ll be more CSS selectors with * &:-webkit-autofill, as well as more JS needed, as far as I can guess without having a deeper look into the library/SCSS files.

What MDC Web Version are you using?

0.44.1

What browser(s) is this bug affecting?

It’s only a problem with Chrome, Firefox still sends a change event. I can’t say anything about the other browsers at the moment as I haven’t tested them.

What are the steps to reproduce the bug?

Create a form with a textfield for username and password while using the outlined variant. Then open it in Chrome, type in some credentials, save them with Chrome and reload the page.

Hints:

• Chrome doesn’t ask for saving the credentials when it’s a local path.
• Do not click around in the page as this will cause the labels to be updated.

[TheCom3di4n]

Hi @abhiomkar, first of all, I want to note that I also had a time when I couldn’t reproduce the bug, but I was unsure if it wasn’t me. Unfortunately, I can’t remember the Chrome version I was using at the time.

But now I can reproduce it again. We also tested it on two independent computers. (Same version of Chrome)

Version of Chrome: 74.0.3729.131 Version of material-components-web: latest@05/13/2019

Oh, and I can’t reopen the issue because I don’t have the necessary rights.

[pangolingo]

I’ve been investigating this in our codebase and put together this hacky quickfix. There’s got to be a better way to handle it.

window.setTimeout(() => {
  document
    .querySelectorAll('.mdc-text-field__input:-webkit-autofill')
    .forEach(el => {
      const textField = el.parentNode;
      const label = textField.querySelector('.mdc-floating-label');
      if (label) {
        label.classList.add('mdc-floating-label--float-above');
      }
      if (textField.MDCTextField) {
        textField.MDCTextField.foundation_.notchOutline(true);
      }
    });
}, 300);