Topic: Bug in "password" field

itearo free asked 8 years ago

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: The meaning: label associated with the input with type="password" display works wrong, labels text displays over password fields text.

layer7 free answered 6 years ago

Registered on this site simply in the hope this fix helps others with this problem.

Add the following to the input field.


    <input type="password" id="userPassword" autocomplete="new-password">

Kamil Paciepnik free answered 7 years ago

Hi david3, thanks for reporting! In the future we will solve this problem. Regards

david3 pro answered 7 years ago

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.

Paul Hovley free answered 8 years ago

Update: 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.

Paul Hovley free answered 8 years ago

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.

Maarten Mensink pro answered 8 years ago

Ok, 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');

Maarten Mensink pro answered 8 years ago

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

itearo free answered 8 years ago

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

Michal Szymanski staff answered 8 years ago

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.

Paul Hovley free answered 8 years ago

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?

xardonik free answered 8 years ago

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

itearo free answered 8 years ago

Desktop - Google Chrome 51.0.2704.22 beta-m

Michal Szymanski staff answered 8 years ago

Hi Itearo, I'm glad you like it. What browser do you use? It seems to works fine when I check it.

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No