igorescobar / jQuery-Mask-Plugin

A jQuery Plugin to make masks on form fields and HTML elements.
http://igorescobar.github.io/jQuery-Mask-Plugin/
Other
4.77k stars 1.42k forks source link

Mask gives wrong result when using a plug-and-play Barcode scanner #739

Open DarkCeptor44 opened 4 years ago

DarkCeptor44 commented 4 years ago

Windows 10 Chrome v80.0.3987.122. Example on https://jsfiddle.net/DarkCeptor44/pqaj87se/.

Hello I am using this plugin on a project and I found a bug while using a plug-and-play Barcode scanner when masking a input field of type text with something like:

const raMaskBehavior = (val) => {
  return val.replace(/\D/g, '').length === 10 ? '000.000.000-0' : '00.000.000-09';
},
raMaskOptions = {
  placeholder: '00.000.000-0',
  onKeyPress: (val, e, field, options) => field.mask(raMaskBehavior(val), options)
};

The idea is that it masks 1234567890 as 123.456.789-0 and it works as intended, but when I use the scanner on a QR code containing 1234567890 with the same field focused suddenly it gives me 124.568.907-3 which is unexpected, my guess is that the scanner sends the number too fast and it doesn't register a few of the numbers, but then 3 and 7 are at the end so it's confusing.

Note that it sends the correct number in Notepad and everywhere else, including a input field of type text with no mask.

jmjjg commented 4 years ago

I have the same kind of problem using Chromium browser version 80.0.3987.149 with Behat (for functional tests) and it seems to me too that when the fields are written (or pasted) too fast in the browser, jquery-mask gets messed up.

I can avoid the problem by commenting between lines 105 and 110 in src/jquery.mask.js (1.14.16) like this:

.on($.jMaskGlobals.useInput ? 'input.mask' : 'keyup.mask', p.behaviour)
/*.on('paste.mask drop.mask', function() {
    setTimeout(function() {
        el.keydown().keyup();
    }, 100);
})*/
.on('change.mask', function(){
    el.data('changed', true);
})
fabioxgn commented 4 years ago

I have the same issue when filling a masked field with Capybara after upgrading from version 1.13.4 to 1.14.16.

Capybara fills the characters too fast and the order is messed up. I was able to work around it by making Capybara fill one character at a time, but I think this should be fixed.

fabioxgn commented 4 years ago

I've found a solution to my case, setting the keyStrokCompensation to 0 solved the problem:

$.jMaskGlobals.keyStrokeCompensation = 0

In the commit it was introduced is not clear why and which browser the problem was.