dev: fix: Any occurance of Mask will push the cursor to one position …

[rupeshdabbir]

…back (AKA Reverse)

Issue:

• Any occurance of Mask anywhere in the val() will push the input by one.
• Example:
  If your mask is $('#div').mask('12/19'); (Credit card expiry), the value will become ('12/91') (Here after you enter 1, the cursor will move backward. Hence this fix will address the issue.

Fix Description:

• Basically this fix will make sure the cursor is at the end position of the val.
• For browsers, they don't support it, there is a graceful fallback

More details:

• Please refer to : https://css-tricks.com/snippets/jquery/move-cursor-to-end-of-textarea-or-input/
• More info: https://stackoverflow.com/a/17780924/1625557

[rupeshdabbir]

Can you kindly check @igorescobar since we are having problems with using the latest version. It breaks on chrome, firefox and everywhere. This fix will address it.

[upigilam]

@igorescobar Could you please review and merge it?

[igorescobar]

Guys, I will check it out this week, okay? Changes on caret positioning are always tricky and things are always more complex than we anticipated. Sorry about this delay.

[rupeshdabbir]

Thanks so much @igorescobar totally appreciate your time.

[Kravimir]

The proposed change will cause the cursor to always be set to the end, which is undesirable. Shouldn't the mask be '00/00' instead of '12/19' anyway?

[rupeshdabbir]

@Kravimir I think there's a confusion in understanding here probably. Let me clarify. if your mask is 12/19, you get 12/91 cuz 'just' after the mask is applied, the cursor jumps back one step back. Cuz next character you enter will be BEFORE the last character i.e 91.

So your result would be 12/91 which would be disastrous.

[melacrea]

Hi there! Any chance to fix this issue this week?

[jmeridth]

@igorescobar can we get this merged and released please?

[igorescobar]

I'm sorry guys but @Kravimir is right. This may fix one problem but it creates another way worse.

Try erasing any digit on the middle of the mask and this change will put the cursor back in the end of the mask which is terrible.

[igorescobar]

Also @rupeshdabbir I notice that the code on your example is wrong. The mask $('#div').mask('12/19'); is invalid. The valid one would be $('#div').mask('00/00');

[igorescobar]

Guys, I've just pushed a patch to the master branch:
https://github.com/igorescobar/jQuery-Mask-Plugin/blob/master/src/jquery.mask.js

Can you test it for me? I couldn't reproduce it anymore from here.

[igorescobar]

Hey guys! (@jmeridth @melacrea @rupeshdabbir @Kravimir @upigilam)

Any news? If you did not receive my previous comment please read it above.

[melacrea]

I'm testing right now ;)

[melacrea]

It works for me!

[rupeshdabbir]

Thank you for the response @igorescobar

Well the problem is: On older versions, it worked but it broke on mobile browsers when there are masking. It worked on chrome but it broke on mobile chrome on Google Pixel phone the last time.

Couple of things @igorescobar

1. Great job! Thanks for getting us the fix.
2. I think there was a mistake communicating on my end, my mask isn't $('#div').mask('12/19')

the value that is being entered is: 12/19

You are right about the middle element with my fix.

Let me test it on browsers and report back. Give me till end of the weekend. I will test it and report it back!

[igorescobar]

@rupeshdabbir So? Does anyone else could test it?

[rupeshdabbir]

@igorescobar I have tested this looks good. I am manually testing this on all the devices I have to make sure nothing is broken since it was working on desktop chrome but was broken on Pixel Chrome.

Couple more suggestion(s):

In your recent fix: b68d6b5

1. Instead of making it caretPosNew = newValL * 10; can we make it caretPosNew = newValL.length;

Few reasons for this one: if we introduce any sort of arithmetic operations, it will re-trigger and create another operation in callstack/heap thus introducing latency when someone is "Rapid typing"

Whereas, the length property will always be computed for all the variables in JS. So we are essentially using what we already have.

2. This does not just happen when someone is typing really fast. This happens even when we type slow in Desktop Chrome before the fix. So the title is little misleading =)) (Just my opinion).

Thanks so much for the great work @igorescobar please do let me know if you need any help from my end! I will be happy to do it.

[Kravimir]

@rupeshdabbir You're worried about the speed of one arithmetic operation? Sure it adds up with every key press, but how many masked fields are going to have values longer than 20 characters? Also newValL is a number, not a string, so "newValL.length" is undefined.

[rupeshdabbir]

@Kravimir It does not happen at the end of 20 chars.. This gets calculated for EVERY char input.
So if you have 20 chars, its calculated 20 times.

But after going through the commit, I see what you're saying. I was in an assumption that newValL = new value with 'caret' applied (as string) (Not the integer)

I think the fix caretPosNew = newValL * 10 is something similar to the PR i sent but I think I put it in a different place.

I think this looks good over all. Thanks @igorescobar @Kravimir

[Kravimir]

@rupeshdabbir Yes, I know it "gets calculated for EVERY char input." That's why I said "sure it adds up with every key press". I just don't think it will be a problem, except maybe on a few low-end Android devices.

@igorescobar I'm curious, would you mind explaining the reason for calling setCaret twice in the "behaviour" function (and each with a different argument), once in a setTimeout and once otherwise? I'm wondering if that's contributing to the problem? (I'm aware that the setTimeout is used to deal with an oddity of Chrome needing a slight delay in setting the caret position.)

[igorescobar]

@Kravimir The setTimeout is just a compensation to make it work on every device. it's ugly, I know but this is the kind of crappy we got to do sometimes to make it work well on as many devices as possible. And take it easy guys. I'm prettty sure that this *10 operation won't break the internet ❤️

Thanks to you all for all the help and patience with me on this.

This fix is available on v1.14.12