Dashlane with Kendo Mask

3 posts, 1 answers
  1. Steven
    Steven avatar
    7 posts
    Member since:
    Nov 2015

    Posted 14 Apr Link to this post

    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. Answer
    Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1798 posts

    Posted 18 Apr Link to this post

    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!
     
  3. Kendo UI is VS 2017 Ready
  4. Steven
    Steven avatar
    7 posts
    Member since:
    Nov 2015

    Posted 19 Apr in reply to Konstantin Dikov Link to this post

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

Back to Top