Chrome autofill with MDL for type="password"

Question

I'm currently working on my website with the MDL (Material Design Lite) from google and I have a little problem.

As you can see, the stars are in the good place but the password stay here (he is moving after any click or press on the keyboard)

My code is really simple :

<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
    <input class="mdl-textfield__input" type="text" name="mail">
    <label class="mdl-textfield__label">Adresse Email</label>
</div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
    <input id="test" class="mdl-textfield__input" type="password" name="password">
    <label class="mdl-textfield__label">Password</label>
</div>

The code is usual and basic. Problem is, in MDL (Link here : https://www.getmdl.io/components/index.html#textfields-section) there is nothing for password type, so I always got the problem from before.

I want to keep the chrome autofill for my client so disabled it is not a option. Is there any way to change this problem ?

Thank's !

Answer 1

HTML

<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
  <input class="mdl-textfield__input" type="password" id="password" required name="password">
  <label class="mdl-textfield__label" for="password"></label>
</div>

CSS Fix

.mdl-textfield--floating-label input[type=password]:-webkit-autofill ~ label {
  transform: translate3d(0, -20px, 0);
  visibility: hidden;
}

.mdl-textfield--floating-label input[type=password]:-webkit-autofill ~ label:after {
  content: 'Password';
  visibility: visible;
  left: 0;
  transform: translate3d(0, -20px, 0);
  background: transparent;
  color: inherit;
}

Change the color and maybe the px offset to suit your needs

---

JQuery solution that works when the type is not "password"

  $.each($('.mdl-textfield__input'), function() {
    $(this).parent().get(0).MaterialTextfield.checkDirty();
  });

---

Another jquery workaround is to force the focus on the input field if autofill is detected. You should put this inside $(document).ready

  setTimeout(function() {
    try { if ( $('#password:-webkit-autofill').length > 0 ) $('#password').focus(); }
    catch (error) { console.log(error); }
  }, 25);