JQuery UI Dialog: Password inputs causing freezing

Question

This is a odd behavior that seems to only happen in Chrome and with JQuery UI. When entering characters into a password field at first everything functions correctly. However, if you attempt to backspace to the last letter in the input, the browser locks up all client side operations. Also, if you try and highlight the characters entered and backspace the client side operations freeze.

Just reaching out to see if anyone has encountered this same issue, and how they resolved it.

In order to experience the issue, we have the dialog auto opening on 2+ unique page home views. Here is a listings page so it can be triggered, I apologize for the inconvenience but I can't remove the counter.

Page: http://www.christineleeteam.com/area/eagleharbor

Answer 1

I had the same problem but cache clearing didn't help. I'm sure it isn't a jquery ui bug. Here is my solution:

   $('input[type="password"]').on('keydown', function(event){
     if (event.which == 8) { //backspace event
       event.preventDefault();
       $(this).val('');
     }
   });

This code is clearing the whole password field on one backspace event.

Answer 2

We encountered the same issue, and used Benkod's solution. We improved it a little to also handle cases where the password text is deleted with the delete key (and not backspace). Another case is when all the text in the control is selected and new text is typed to replace it. Here is the script we used:

    Sys.Application.add_load(function() {
        $('input[type=password]').keydown(function(event) {

            var isAllTextSelected = this.value.slice(this.selectionStart, this.selectionEnd) == this.value;
            var isLastChar = $(this).val().length == 1;
            if (isAllTextSelected && $(this).val().length > 0) {
                $(this).val('');
            }
            if ((event.which == 8 || event.which == 46) && (isLastChar || isAllTextSelected)) { //backspace event

                event.preventDefault();
                $(this).val('');
            }
        });
    });