Cursor jumping on HTC One X

[hoverlover]

I know this has been an issue in the past, but I'm still getting cursor jumping issues for the credit card number field. Here's a quick screen recording that shows it.

I found out because a customer of mine using an HTC One reported the issue, and I verified it using the HTC One X emulator in BrowserStack.

I'm not sure I know what to do to fix this. I'll give it a shot, but in the meantime it would be great if someone who knew what they were doing could take a look and see if they could fix it.

Thanks!

[hoverlover]

I think I've narrowed it down to these two lines.

Seems the delays of the two setTimeout calls are colliding somehow, causing the cursor to be positioned before the formatting takes place. If I remove those timeouts everything seems to work fine no matter how fast I type.

Can someone tell me why those setTimeout calls are even needed? It's not obvious to me.

[hoverlover]

Spoke too soon 😞 It did seem to help it not happen as often, but I'm still getting the cursor ending up in the wrong place, even after commenting those lines.

[jamesreggio]

Yep, this is a persistent problem in mobile Firefox (which I assume you are
using). The setTimeout calls were actually designed to 'fix' the cursor
positioning by re-writing the value of the field after a fixed delay.
(Certain browsers reposition the cursor to the end of the value when it is
programmatically changed.)

The problem is endemic to this library, and I don't think it can be
definitively resolved without a total rewrite. I can suggest two
workarounds for you, though:

• increase the delay in the setTimeout calls until the problem resolves
  (something in the range of 100-300ms should suit, but will regress the
  experience of your other users)
• disable jQuery.payment on the troublesome browsers (this is not something
  we were comfortable baking into the library since it requires user-agent
  matching)

Hope this helps.

On Friday, December 18, 2015, Chad Boyd notifications@github.com wrote:

Spoke too soon [image: 😞] It did seem to help it not happen
as often, but I'm still getting the cursor ending up in the wrong place,
even after commenting those lines.

—
Reply to this email directly or view it on GitHub
#197 (comment)
.

[hoverlover]

Thanks, James. I opted to take the latter approach and disable it based on Android version. Wish I could support formatting on all mobile browsers, but I was just having too much trouble. It's not just this library, btw. I tried several other formatting libraries out there, and none of them worked properly. Thanks for your reply!

[jamesreggio]

No worries.

I'm working on a (long-awaited, fabled) replacement, so I'll ping this
issue again when it's ready.

On Sat, Dec 19, 2015 at 5:53 PM, Chad Boyd notifications@github.com wrote:

Thanks, James. I opted to take the latter approach and disable it based on
Android version. Wish I could support formatting on all mobile browsers,
but I was just having too much trouble. It's not just this library, btw. I
tried several other formatting libraries out there, and none of them worked
properly. Thanks for your reply!

—
Reply to this email directly or view it on GitHub
#197 (comment)
.

[jenanwise]

@hoverlover To follow up -- thanks for the report! Going to close as "can't fix without breaking everything else" 😢 And I'll let James ping this thread when his magic new library is available 😁