braintree / restricted-input

Restrict <input>s to certain valid characters (e.g. formatting phone or card numbers)
https://braintree.github.io/restricted-input/
MIT License
68 stars 25 forks source link

Improve Android Formatting with Samsung Keyboard #25

Closed crookedneighbor closed 7 years ago

crookedneighbor commented 7 years ago

Here's what was happening.

Pattern: {{9999}} {{9999}} {{9999}} {{9999}}

In a desktop chrome, typing 1234 will automatically add a space, so the value of the input is 1234 and set the selection to be after the space.

In Android Chrome, on some keyboards, typing 1234 also automatically added the space, so you could inspect the value of the input and it would be 1234, but setting the selection it was as if the input was still 1234, so the selection would happen after the 4 and before the space. This would repeat when continuing to type, giving us this effect:

ezgif com-optimize

So, for some reason, the input's value in the DOM was not being updated until after the selection was done. By setting the setSelection code in a timeout, it works.

intelliot commented 7 years ago

Which keyboard(s) does this happen with?

Wondering why it didn't occur with the keyboards we previously tested.

crookedneighbor commented 7 years ago

Samsung Keyboard.

The spooky thing is, I swear I tested this keyboard with your previous change.

lilaconlee commented 7 years ago

🐈 :spooky: (once travis is looking 💚 )

crookedneighbor commented 7 years ago

Looks like this introduces a bug where if an input is done in the middle of an input, it puts it at the end of the input instead of in the correct place (both desktop and mobile).

lilaconlee commented 7 years ago

🐈 :fingerscrossed:

crookedneighbor commented 7 years ago

As soon as the integration tests pass, I'll merge this.

crookedneighbor commented 7 years ago

The Travis VM was getting stuck with the Ruby binary error. The other build ran through all the integration tests without error.