Login with:


Not a member? Sign Up

Forgot Password?

Signup with:


Already have an account? Log in

Bug in "password" field

Home Forums Material Design for Bootstrap Support Bug in "password" field

Tagged: , ,

This topic contains 12 replies, has 7 voices, and was last updated by  Kamil Paciepnik 1 month, 1 week ago.

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
  • #7325


    Hello, Michal!
    Really like your work!

    Found problem on your site, that is also discovers in your MDB library.
    Here is screenshot posted in my cloud: https://yadi.sk/i/jJnACKSyrFoKv
    The meaning: label associated with the input with type=”password” display works wrong, labels text displays over password fields text.


    Michal Szymanski

    Hi Itearo,

    I’m glad you like it.

    What browser do you use? It seems to works fine when I check it.



    Desktop – Google Chrome 51.0.2704.22 beta-m



    There is problem with autocomplete by chrome. When chrome autocomplete field then doesn’t touch field and label won’t get class active.


    Paul Hovley

    I have this problem as well for other input fields as well. What would be a good workaround for this then? Do we need to manually give the fields the active class until this is fixed?


    Michal Szymanski

    Hi guys,

    I’m trying to solve it but I cannot see this bug on any browser or devices. It also works fine with my autocomplete by chrome – take a look at the gif below:


    I’m still looking for a reason, but If you have an idea why it doesn’t work for , let me know.



    The bug is found after i press “reload page” button in chrome, and then after i click on any place of the site this bug is disappears


    • This reply was modified 10 months ago by  itearo.

    Maarten Mensink

    I am using the template within a angular 2 application. We see the same behavior when navigating in the application.


    Maarten Mensink


    After some digging i found out why this isnt working.

    For autocomplete scenario the change event will fire. So the code that handles change will run.

     $(document).on('change', input_selector, function () {
                if ($(this).val().length !== 0 || $(this).attr('placeholder') !== undefined) {
                    $(this).siblings('label, i').addClass('active');

    But the function that handles initial values only runs when a document is loaded. So when you add a field at runtime then this wont get run. And i must note that this is a extremely expensive function to run more then once!

    // Function to update labels of text fields
            Materialize.updateTextFields = function () {
                var input_selector = 'input[type=text], input[type=password], input[type=email], input[type=url], input[type=tel], input[type=number], input[type=search], textarea';
                $(input_selector).each(function (index, element) {
                    if ($(element).val().length > 0 || $(this).attr('placeholder') !== undefined || $(element)[0].validity.badInput === true) {
                        $(this).siblings('label, i').addClass('active');
                    } else {
                        $(this).siblings('label, i').removeClass('active');

    Paul Hovley

    If it’s any help, I am also using Angular, but not Angular 2. I have recreated the bug on chrome, firefox, and edge. I’m guessing it’s a problem with compatibility with Angular as well, but I am not sure why yet. It likely has something to do with the way Angular does processing on the page post load.

    I have confirmed this by removing Angular’s involvement on the page, and the form works as it should.

    The following are screenshots of the problem on each browser.


    Screenshot of the form without angular


    This is a snippet of the code for the first input field.

    <div class="row">
          <div class="input-field col-md-6">
          <input type="text" id="first_name" ng-model="first_name" class="validate" placeholder="First Name">
          <label for="first_name" id="first_name_lbl" >First Name</label>

    I can “force” it to work by adding the ‘active’ class in my javascript when the input field has a value. But this isn’t much of a surprise.


    Paul Hovley


    When I include the mdb library from an Angular javascript controller (which runs after the dom has loaded) instead of from the html, the problem disappears.

    Below is the code I used to do this.

    var script = document.createElement('script');
    script.src = 'libs/MDB_3.3.3/js/mdb.js';
    script.src = 'libs/MDB_3.3.3/js/bootstrap.min.js'

    There is probably a better way to do this, but it’s what I have for now.

    • This reply was modified 10 months ago by  Paul Hovley.


    I’m experiencing the same issue. As itearo said earlier in this thread, this bug only occurs when Chrome autofills the inputs on page load (before any user interaction).

    In my Google searching, I came across this thread from material-design-bootstrap, a similar project.

    This comment explains a particular behavior apparently unique to Chrome, which might be noteworthy: “The problem happens because password fields in chrome are not really auto-filled until the user interacts with the page, in order to avoid security risks in password harvesting”, and mentions that a pseudo class (:-webkit-autofill) which might be of use.

    P.S. Sorry to revive an old thread, but I found this thread via a Google search, and I’m guessing others might too.


    Kamil Paciepnik

    Hi david3,

    thanks for reporting! In the future we will solve this problem.


Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.