Caret Positiong on Android

[diebugger]

recovered setCaret from version 1.13.9 (avoid issues on android devices)

[fernandobandeira]

I've tested this on some samsung devices and it seems to fix it...

[igorescobar]

@fernandobandeira take a look into this comment: #432 (comment)

[fernandobandeira]

@igorescobar He's right, you can check it on desktop: http://mask.artistas.io/

But with this one we'll fix the mobile issue...
IMHO both the current and this one is wrong, indeed the current ends with 1234-3215 and this one ends with 1234-1567 but the expected result should be 1234-1235 as he described.

You can check this other mask (123) 123-4567 turns into (123) 123-1234 as expected...

I think that we should merge this and then start working on a fix for this issue, this is already broken anyway...

[igorescobar]

@fernandobandeira you are right. I'm need to spend some time and try to fix this. Lots happening on my work right now its been hard to find some spear time and get this done.

[igorescobar]

Turned out that this doesn't fixed the problem. I released a fix for this at:
https://github.com/igorescobar/jQuery-Mask-Plugin/blob/master/src/jquery.mask.js

Could you all test it please?

[igorescobar]

@fernandobandeira @diebugger ^

[fernandobandeira]

@igorescobar

Check the video:

https://drive.google.com/file/d/0B5j7CzpTIt5BTmtpVmdLTjh2bVE/view?usp=sharing

Tested just now (less than 10 minutes) on http://igorescobar.github.io/jQuery-Mask-Plugin/

Seems to be using the latest v1.14.3

😢

[igorescobar]

@fernandobandeira A few users with Android browser tested and said it is fine... thats weird... any idea on how I can reproduce this without having a freaking android phone?

[fernandobandeira]

@igorescobar You need a samsung device using a samsung keyboard and the default browser, if you use chrome, or switftkey for example it will work fine. You can't test it on emulator because of that.

Most of us as dev's mostly switch to chrome or use something like swiftkey but it doesn't mean that our users aren't affected by this...

Maybe https://www.browserstack.com/ can simulate this, they use native phones instead of emulating so i guess you can reproduce this there, they also give free license to Open Source so you could try that, it would make your life easier =)

This can be fixed, v1.13.9 for example works fine...

[igorescobar]

@fernandobandeira yeah I've just tested on a friend's phone with chrome (default browser doesnt exist on his phone) and it worked fine. I need to reproduce on a place where I can debug, browser stack wouldnt help me. The Android "default browser" seems to have only 6% of the browser market as seen here:
https://www.netmarketshare.com/browser-market-share.aspx?qprid=1&qpcustomb=1

I will try to fix it but seems like a waste of time because the market share is going down each month.

[igorescobar]

@fernandobandeira I've just tested on the Default Chrome browser on a friend's samsung and it also worked fine (Android Browser v4.0.10-53 I think). in which version are you testing it?

[fernandobandeira]

I'm also using 4.0.10-53 on a note5, check if he's using the default samsung keyboard, this is an issue with autocomplete + this browser. I'm able to reproduce this on S6 and other phones as well...

[igorescobar]

@fernandobandeira if you add autocomplete="false" on your input it works?

[fernandobandeira]

Yes on mostly phones S6, note5 included, some of them like the J7 still have the issue so there's exceptions, the way v1.13.9 does seems to fix for these as well, not sure whats the real deal, seems more like an autocomplete bug that's changing how the caret function works.

[igorescobar]

@fernandobandeira I could work around this:
https://github.com/igorescobar/jQuery-Mask-Plugin/blob/master/src/jquery.mask.js#L385

If this made it work.

[fernandobandeira]

@igorescobar

There's only 1 mask that I know that fixed this issue, here's the relevant commit:

digitalBush/jquery.maskedinput@89aa9d3

They didn't release a version with this fix, it's over a year already
There's some usefull issues on their repo, we can get some info there:

digitalBush/jquery.maskedinput#280 and digitalBush/jquery.maskedinput#302

I've hosted a demo with the fix here: http://mask.artistas.io/demo/

Here's a video: https://drive.google.com/file/d/0B5j7CzpTIt5Bd0RSMVFTeHA5bWM/view?usp=sharing

Notice how the caret moves to the end of the input after typing (123), but the input still goes in the right position, I guess that's the workaround.
It also has the correct behavior of typing (123) 123-4567 and turning into (123) 123-1234 so if we could apply something like that it would be a perfect fix =X

This PR does fix it too btw...

[igorescobar]

@fernandobandeira That's weird... this PR fix this but what actually happens is that it also breaks caret positions in all webkit browsers. So it fixes it this but it also breaks for everybody else.

What really happens is that the function createTextRange don't even exists on webkit browsers it only exists on IE. Luckily we have a try catch wrapping this so the error comes unperceptive. So by this not working the caret goes directly to the end of the input.

The fact that this kinda works for this scenario is only a good surprise :P

[igorescobar]

@fernandobandeira What you could do is... you can comment out this entire snippet and see if it works:

If it works what we can do is to bypass caret positioning for this specific user agent.

[fernandobandeira]

@igorescobar Yes it works when we bypass the caret positioning,

https://drive.google.com/file/d/0B5j7CzpTIt5BOUVyZVpGcDNjaEE/view?usp=sharing

I think we can fix it with this

[igorescobar]

@fernandobandeira Cool! Can you inform the the full user agent?

What happens if you erase something in the middle and try to type a new thing? like you erase the month and tries to type something else inside it?

[fernandobandeira]

@igorescobar

Full user agent

Mozilla/5.0 (Linux; Android 6.0.1; SAMSUNG SM-N920G Build/MMB29K) AppleWebKit/537.36 (KHTML, like Gecko) SamsungBrowser/4.0 Chrome/44.0.2403.133 Mobile Safari/537.36

I think that matching indexOf SamsungBrowser should be the way to go...

And as you probably thought when erasing something and typing again things get messy, everytime you delete/type something the caret moves to the end of the input so if you have 12/10/1990 you delete 12/10/1990, it will turn into 12/01/990 |

[igorescobar]

@fernandobandeira that's what I thought because the cursor goes to the end and things will get messy indeed. Oh boy I wanted so badly do debug this and fix this properly LOL.

[igorescobar]

And hey! @fernandobandeira thank you so much for your help and your videos... VERY helpful!

[labmorales]

I just downloaded and i'm still having the same problem on Samsung S6 and Samsung S6 Edge. To make it work i'm using the following workaround with the onChange callback (not pretty at all but it works). Hope it helps.

$('section.inscricao #cpf').mask('000.000.000-00',
            {
                reverse: true,
                onChange: function(cpf){
                    var cpfEl = $('section.inscricao #cpf').get(0);
                    cpfEl.selectionStart = cpfEl.selectionEnd = cpfEl.value.length;
                }
            }
        );

[igorescobar]

@labmorales could you test this version, please?
https://github.com/igorescobar/jQuery-Mask-Plugin/blob/android-fix/src/jquery.mask.js

[igorescobar]

@fernandobandeira ^

[igorescobar]

@fernandobandeira I noticed that a guys seems to fix this by just adding a setTimeout interval before setting the caret position so I changed his code a liitle bit to make it fit on our architecture. I removed the .focus() because I think its unnecessary but if it don't work I will put it back and test it again. Thanks!

[felipejunges]

@igorescobar tested this new version, still having problem (Moto G3 - Chrome).
In date mask, if I start typing:
21/12
I get:
21/21
(After the second "1", the cursor come back to the right of "/")

I've recorded the problem: https://youtu.be/dknWyxhxtGE (trying to type 21/12/2016)

[igorescobar]

@felipejunges @fernandobandeira
Released another attempt here:
https://github.com/igorescobar/jQuery-Mask-Plugin/blob/android-fix/src/jquery.mask.js

Could you please give it a try?

[felipejunges]

@igorescobar unfortunately the behavior stills (the cursor come "back" right after the "/" char)

[igorescobar]

@felipejunges by any change we could talk via Skype?
id: igorescobar88

[felipejunges]

Sure, sent you the invite (BTW, I'm brazilian too!)

[igorescobar]

many thanks to @felipejunges and @fernandobandeira the new version is released.

[igorescobar]

@labmorales @diebugger @schmidt @fernandobandeira upgrade your version. Let me know if its okay now.

[fernandobandeira]

Worked for me on both samsung browser and chrome, tested on https://igorescobar.github.io/jQuery-Mask-Plugin/ with the v1.14.8 😄, ps sry for the delay...

[igorescobar]

Awesome @fernandobandeira thanks!

[ghost]

Samsung Galaxy s IV mini SCH-1435 still has the issue.When we have a number format with 123-456.

My input is 123 and upon typing 4 the caret position is retained next to hyphen and data entered is moving to last position