Materialize: Class 'active' not added, when autofill is used

[mishantrop]

<form action="" class="col s12" method="post" accept-charset="utf-8">
    <div class="row">
        <div class="input-field col s12" style="margin-bottom: 10px;">
            <i class="mdi-action-account-circle prefix"></i>
            <input type="text" name="identity" value="" class="validate" id="icon_prefix" required="required" style="margin-top: 0.5rem;"  />
            <label for="icon_prefix" style="margin-left: 3.5rem;" class="active">Номер телефона или e-mail</label>
        </div>
        <div class="input-field col s12">
            <i class="mdi-action-lock-outline prefix"></i>
            <input type="password" name="password" value="" class="validate" id="icon_password" required="required" style="margin-top: 0.5rem;"  />
            <label for="icon_password" style="margin-left: 3.5rem;" class="active">Пароль</label>
        </div>
        <div class="input-field col s6">
                <button class="btn cyan waves-effect waves-light right" type="submit" name="action"><i class="mdi-action-lock-open"></i> Войти</button>

        </div>
    </div>
</form> 

[quentin-r37]

Exactly the same problem here :

[mishantrop]

Solved by adding placeholder attribute to input.
materialize/js/forms.js

if ($(element).val().length > 0 || $(this).attr('placeholder') !== undefined || $(element)[0].validity.badInput === true) {
    $(this).siblings('label').addClass('active');
}

I am not sure that placeholder checking for undefined is necessary.

[lukeclewlow]

If you wait until everything is rendered, can do soemthing like this,

$('input:-webkit-autofill').each(function(){
        if ($(this).val().length !== "") {
            $(this).siblings('label, i').addClass('active');
        }
});

[darckyn]

Same problem here.

In the login page.

I think this error occurs on all input password.

plz fix this. :)

[jstowey]

I'm having the same issue

$('input:-webkit-autofill').each(function(){
        if ($(this).val().length !== "") {
            $(this).siblings('label, i').addClass('active');
        }
});

The only solution that worked for me is adding to the input:

placeholder=" "

Is there a better fix?

[tomscholz]

Please check https://github.com/Dogfalo/materialize/issues/194

[darckyn]

I've tried some solutions presented and none worked properly, when it works it's just in chrome, when I try on firefox the error still persists.

I do not think this should be closed if the error still does, right?

What would be the official solution to this problem?

[darckyn]

Thanks for reopening.

I'd like to share some of the solutions I've put in place to try to help, with the ultimate solution.

The browsers I tested were the following: Chrome, Firefox, Safari, Edge.

1. The best solutions, it really solves the problem 100%. Unfortunately it only works on the chrome browser.
   In other browsers, this solutions worsens behavior, leaving the text static even when you are typing in the input, making it very difficult to read what you are writing.

input:-webkit-autofill { +label { @extend .active; } } }

input:-webkit-autofill {
    &,
    &:hover,
    &:focus,
    &:active {
        -webkit-box-shadow: inset 0 0 0 500px white !important;
    }
    +label {
        font-size: 0.8rem;
        -webkit-transform: translateY(-140%);
        transform: translateY(-140%);
    }
}

1. This solution almost reached 80% in all browsers, but in some browsers like chrome it is necessary for the user to click on any area for it to be applied and don't work in Microsoft browsers:

input:placeholder-shown {
    +label {
        @extend .active;
    }
}

1. The following solutions unfortunately do not work in any browser or made the error worse (Probably for lack of explanation of how to apply these solutions):

$(':input').one('input', function () {
    setTimeout($('input[type=password]:-webkit-autofill').siblings('label').addClass('active')}, 0);
});

```javascript
$("input[name=login]").on("change.autofill", function () {
$("[for=password]").addClass("active");
}).click(function() {
$(this).unbind("change.autofill");
});

```javascript
Template.myTemplateName.onRendered (function(){
  Materialize.updateTextFields();
});

```javascript
$(window).load($.debounce(200,function(){
$('input:-webkit-autofill').each(function(){
if ($(this).val().length !== "") {
$(this).siblings('label, i').addClass('active');
}
});
}));

4. This solution is currently the one I'm using because it applies to 100% of browsers and does not present any strange behavior, but the effect is lost by keeping the text always active, so I do not consider this a defenitive solution:

```html
<input placeholder=" " type="email" id="user_email">
<label class="active" for="user_email">Email</label>

I hope that with this information I have helped to find a definitive solution, that works in all current browsers. (IE does not count)

PS: Thanks for all the hard work that all the developers given in materializecss, it's a great front-end framework.

[Dogfalo]

This problem seems to have been fixed in recent versions of Chrome and Firefox

[WhileLoop]

Broken in Chrome 65.0.3325.146 , Materialize 1.0.0-alpha.4

[WhileLoop]

Fixed by adding:
```
input:-webkit-autofill + label {
-webkit-transform: translateY(-14px) scale(0.8);
transform: translateY(-14px) scale(0.8);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}

[gperozzo]

@WhileLoop where did you added your code?

[OHR7]

@WhileLoop finallyy!!! jaj thanks so much