Firefox Android - incorrect caret position when typing number in a masked field
mpiasta-ca opened this issue · 22 comments
When you try the demo on an Android device within Firefox for Android (which is a noteable browser, because it allows you to use Adblock Plus on your Android device lol), as you try to type a phone number, when the masking adds characters into the field around your number, the cursor skips to the wrong position.
ie. as you type 6045551234... it types in as (604) 432-1555. Because as you type 604, masking adds a - to make it 604-. But then every digit you type goes before the -, so... 6045-, 60455-, 604555-, 6041555-, (604)215-55, etc...
Works fine on Android Chrome however.
Confirmed, but according to this Mobile/Tablet Browser Market Share breakdown, Firefox currently has 0.67% of the mobile market share, so this isn't super high priority. It will mostly likely be a case of finding or filing a bug with their bugzilla, if anyone has time to do some remote debugging and figure out where the problem is (most likely in _handleInputKey).
I've come across this aswell.
FF is my default Android browser, so I'll attempt to do some remote debugging or testing of patches if they arise.
It's worth mentioning that Firefox Windows works, so that's quite the (╯°□°）╯︵ ┻━┻
Lol ok thanks guys. @sime thanks for offering to do some remote debugging. Do let us know what you find.
I have briefly taken a look at _handleInputKey. To my eyes it is behaving correctly. Initial I was suspicious about input.setSelectionRange, but it seems to be find.
What I'll look into next is if any additional events are jumping in when they shouldn't as the caret is visibly in the right spot at one point before it settles.
PS disabling autoFormat is a workaround to this problem.
Hrm. Still looking into this. I thought I could influence the behaviour by removing all occurrences of input.setSelectionRange, but no difference experienced.
I'm leaving this for now, and just disabling autoFormat on Firefox for Android using this detection:
var user_agent = navigator.userAgent.toLowerCase(),
is_firefox = user_agent.indexOf('firefox') > -1,
is_android = user_agent.indexOf('android') > -1,
is_firefox_android = is_firefox && is_android;Can someone file a bug with Mozilla? Just link them to the demo website, and let them know it works in Firefox Windows, but fails in Firefox Android.
They have a Firefox Beta version for Android in which maybe they already fixed the issue.
@sime voted for this issue in the firefox bug-tracker, everybody can do it as well, just sign in with github account
Good idea! I just voted - please all others do the same!
Good news! Apparently this is fixed in Firefox Beta 44 - can anyone confirm?
Looks like it is working form me. Will wait re-confirm with Firefox 44 is GA.
I don't believe the demo is valid anymore. It seems that autoFormat is disabled.
I removed the is_firefox_android hack from my site and it works (v7.0.2) as described in the above Mozilla bug.
But the cursor jumps back, which may confuse the user.
Below I demonstrate the cursor position with the pipe (|) symbol.
Input: +1234
Expected: +1 234-|
Experienced: +1 234|-
Input: +61234
Expected: +61 2 34|
Experienced: +61 2 3|4
The cursor jumps a character before or after formatting has occurred.
Though I think I can say this particular issue could be closed.
@sime thanks for taking a look. That actually looks like the original issue to me - are you sure you're on v44?
@jackocnr Yes I'm on v44.
The original bug as described on Bugzilla is the ordering of the number is wrong. Not specifically the cursor.
Ordering matters the most :)
@sime what's the end result if you type 6045551234?
Do you get the correct result: (604) 555-1234
Or the op's backwards issue: (604) 432-1555
I get the correct result.
Ok brilliant. Then I'll close this. Please could you open a new issue for the cursor problem?
Was the issue of cursor problem opened? Please link it?