Dashlane with Kendo Mask

[Steven]

I set up a Kendo MaskedTextbox for a phone number field, like so:

 

$input.kendoMaskedTextBox({
  mask: '000-000-0000',
  pattern: '\\d*'
});

Nothing crazy going on there. It works as designed, i.e. when typing in numbers or pasting a phone number or filling the field with jQuery, it will remove non-numeric characters and format it with the hyphens.

The problem I'm running into is with a tool called Dashlane, which is a password/autofill utility. When I choose a phone number that was saved in Dashlane to populate my phone field, Dashlane has the number saved as "1234567890" and that is what gets put into the masked textbox.

The Kendo mask does not seem to account for this type of input. I'm guessing the Dashlane extension is manually setting the `value` property of the DOM element, which is not triggering a keyboard event or something. I think it is triggering the `onchange` event, though. Seems like the Kendo mask may need to watch for value changes as well. After DL updates the value, the field doesn't mask it and the mask is just straight-up broken after that.

Has this ever been brought up before? Has anyone else encountered this problem? Is there anything I can do to make sure the mask doesn't get broken using Dashlane's autofill?

[Konstantin Dikov]

Hello Steven,

Most likely, the tool that you are using sets the value with jQuery's val method or as you have guessed, sets the value directly to the DOM element, non of which will fire the change event of the INPUT element. Furthermore, setting the value to the INPUT element with the val method will break the mask of the widget and the only solution for fixing it back would be by re-initializing it again through the setOptions method. If you can manage to handle some event that fires after the tool changes the value, you can use the following to fix the mask and set the correct value:

var maskedTextBox = $input.data("kendoMaskedTextBox");
maskedTextBox.setOptions(maskedTextBox.options);

Here is a thread that could prove helpful:

• http://stackoverflow.com/questions/3179385/val-doesnt-trigger-change-in-jquery

Hope this helps.


Regards,
Konstantin Dikov
Telerik

 

 

[Steven]

Thanks Konstantin.

I attached an event handler to the change event on that input that simply writes to the console and noticed that the Dashlane utility does indeed trigger the change event when it updates the data. I'm not sure why Kendo UI would ignore/break because of that, though I'd say that this is an edge-case that probably isn't worth investigating further.

I was able to resolve the broken masking by using the logic you provide. In case anyone runs into this in the future, this is what I ended up doing:

$input.on('change', function () {
  var maskedTextBox = $(this).data('kendoMaskedTextBox');
  if (maskedTextBox) {
    maskedTextBox.setOptions(maskedTextBox.options);
  }
});