Floating labels for Password inputs not triggering on auto-fill

[lamoni]

When using the following input code, floating labels aren't triggering on auto-fill for the Password inputs (they're working fine for text inputs):

<div class="row">
    <div class="col-md-8 col-md-offset-2">
        <div class="form-group">
            <input type="email" class="form-control floating-label input-lg" name="email" placeholder="Username or Email" value="{{ old('email') }}">
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-8 col-md-offset-2">
        <div class="form-group">
            <input type="password" class="form-control floating-label input-lg" name="password" placeholder="Password" value="">
        </div>
    </div>
</div>

Screenshot:

[paulirwin]

The new selector is something like this: .form-group.label-floating input.form-control:-webkit-autofill ~ label.control-label

By adding the following lines to my site's CSS file it fixes the issue in 0.4.0:

.form-group.label-floating input.form-control:-webkit-autofill ~ label.control-label {
    top: -30px;
    left: 0;
    font-size: 12px;
    line-height: 1.07142857;
}

[rosskevin]

@paulirwin please try master, I checked the generated source and it looks correct.

[paulirwin]

Yes that seems to work!

[rosskevin]

:+1:

[paulirwin]

Are you going to release a 0.4.1 for this?

[rosskevin]

Done.

[rahulshawsrm]

1. bower install arrive.js
2. $.material.init()

Done

[ZhuQinglei]

The problem persist here: I am using React in Meteor, and I have already set these in my config.js in client folder:

import "../../node_modules/bootstrap-material-design/dist/js/material.js"
import "../../node_modules/bootstrap-material-design/dist/js/ripples.js"
import "../../node_modules/arrive/src/arrive.js"
import "../../node_modules/react-bootstrap-table/dist/react-bootstrap-table.min.js"

$.material.options.autofill = true;
$.material.init();

I checked my $.material.options, and it shows that the autofill is enabled successfully:

But my floating label is still overlapping with my input value:

I found that if I set the value before the component is firstly loaded, it is working fine; But when I refresh the page (I was using redux-persist retained the value) then the label is overlapping.

I checked the css, and I believe it is the is-empty class causing the issue:

But I do not know how to solve the problem, isn't it suppose to remove is-empty class once the input value is no longer empty? Any suggestion would be really appreciated! Thanks!

[salmanmemon1]

http://stackoverflowcode.blogspot.com/2017/08/floating-labels-for-password-inputs-not.html

[fromage9747]

I ran into the same issue. Followed the workaround from the above link provided by salmanmemon1 which whilst it worked, it wasn't elegant. I was trying to trigger a material datepicker. After putting the datepicker function in document ready, all works well.