Login with:


Or:


Not a member? Sign Up

Forgot Password?

Signup with:


Or:


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 4 months, 2 weeks ago.

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

    itearo
    Participant

    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.

    #7332

    Michal Szymanski
    Keymaster

    Hi Itearo,

    I’m glad you like it.

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

    #7333

    itearo
    Participant

    Desktop – Google Chrome 51.0.2704.22 beta-m

    #7383

    xardonik
    Participant

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

    #7424

    Paul Hovley
    Participant

    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?

    #7435

    Michal Szymanski
    Keymaster

    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.

    #7444

    itearo
    Participant

    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

    • This reply was modified 1 year, 1 month ago by  itearo.
    #7447

    Maarten Mensink
    Participant

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

    #7453

    Maarten Mensink
    Participant

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

    Paul Hovley
    Participant

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

    Paul Hovley
    Participant

    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.

    • This reply was modified 1 year, 1 month ago by  Paul Hovley.
    #13299

    david3
    Participant

    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.

    #13302

    Kamil Paciepnik
    Participant

    Hi david3,

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

    Regards

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

You must be logged in to reply to this topic.