This is a migrated thread and some comments may be shown as answers.

Dashlane with Kendo Mask

2 Answers 144 Views
MaskedTextBox
This is a migrated thread and some comments may be shown as answers.
Steven
Top achievements
Rank 1
Steven asked on 14 Apr 2016, 08:33 PM
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?

2 Answers, 1 is accepted

Sort by
0
Accepted
Konstantin Dikov
Telerik team
answered on 18 Apr 2016, 05:49 PM
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:
Hope this helps.


Regards,
Konstantin Dikov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Steven
Top achievements
Rank 1
answered on 19 Apr 2016, 09:12 PM

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

Tags
MaskedTextBox
Asked by
Steven
Top achievements
Rank 1
Answers by
Konstantin Dikov
Telerik team
Steven
Top achievements
Rank 1
Share this question
or