The card number inputs will set its cursor position to the original location prior to formatting instead of setting its cursor position to the updated location found after formatting.
Why introduce these changes?
On Chrome, Firefox, Safari, and IE, when users navigate through the card number digits with arrow keys or the mouse cursor to modify a value, they are forced to reselect their location because the current formatter always points the cursor to the rightmost cursor.
Reproducing the issue:
How is this achieved?
When the reFormatCardNumber event function is raised, we assign the current caret position of the input to the cursor variable before any formatting occurs. cursor will remain the same after formatting and will be used when setting the selection range.
I decided to ignore this change on the card expiry formatter because it leads to a more confusion user experience in my opinion. The formatting is sophisticated enough when determining the month and year values.
Changes
Why introduce these changes?
Reproducing the issue:![](https://cl.ly/3o1Q0p1Z0u3X/Screen%20Recording%202018-08-08%20at%2001.21%20PM.gif)
How is this achieved?
When the
reFormatCardNumber
event function is raised, we assign the current caret position of the input to thecursor
variable before any formatting occurs.cursor
will remain the same after formatting and will be used when setting the selection range.I decided to ignore this change on the card expiry formatter because it leads to a more confusion user experience in my opinion. The formatting is sophisticated enough when determining the month and year values.