Bug in &#38;quot;password&#38;quot; field

layer7 free answered 7 years ago

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

Add the following to the input field.

    autocomplete="new-password"

E.G.

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

Add comment

Kamil Paciepnik free answered 7 years ago

0 0 Best answer

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

Add comment

david3 pro answered 7 years ago

0 0 Best answer

Please insert min. 20 characters.

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.

Add comment

Paul Hovley free answered 8 years ago

0 0 Best answer

Please insert min. 20 characters.

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';
document.body.appendChild(script);
script.src = 'libs/MDB_3.3.3/js/bootstrap.min.js'
document.body.appendChild(script);

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

Add comment

Paul Hovley free answered 8 years ago

0 0 Best answer

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.

https://goo.gl/photos/UM4FjQxcR8bsn3Fj9

Screenshot of the form without angular

https://goo.gl/photos/x3KTwoa6c3v7bwr68

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

<pre><code><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>
</div></code></pre>

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.

<pre><code>if($scope.first_name){
     $('#first_name_lbl').addClass('active');
}</code></pre>

Please insert min. 20 characters.

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. https://goo.gl/photos/UM4FjQxcR8bsn3Fj9 Screenshot of the form without angular https://goo.gl/photos/x3KTwoa6c3v7bwr68 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>
</div>

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.

if($scope.first_name){
     $('#first_name_lbl').addClass('active');
}

Add comment

Maarten Mensink pro answered 8 years ago

0 0 Best answer

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.

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

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!

<pre><code>// 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');
                }
            });
        };</code></pre>

Please insert min. 20 characters.

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');
            }
            validate_field($(this));
        });

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');
                }
            });
        };

Add comment

Maarten Mensink pro answered 8 years ago

0 0 Best answer

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

Add comment

itearo free answered 8 years ago

0 0 Best answer

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 https://goo.gl/phz435

Add comment

Michal Szymanski staff answered 8 years ago

0 0 Best answer

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: http://mdbootstrap.com/images/temporary/form.gif I'm still looking for a reason, but If you have an idea why it doesn't work for , let me know.

Add comment

Paul Hovley free answered 8 years ago

0 0 Best answer

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?

Add comment

xardonik free answered 8 years ago

0 1 Best answer

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

Add comment

itearo free answered 8 years ago

0 0 Best answer

Desktop - Google Chrome 51.0.2704.22 beta-m

Add comment

Michal Szymanski staff answered 8 years ago

0 0 Best answer

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

Add comment