react-intl-tel-input
react-intl-tel-input copied to clipboard
Cursor moves to wrong location when entering number with country code
Expected Behavior
When entering an Estonian 8-character phone number, the prop format
is set to true and writing the country code in the beginning, you should be able to enter the number so that all numbers are in the right order.
Current Behavior
When entering an Estonian (+372 country code) phone number that is 8 characters long, then after entering the 7th character, the cursor moves and the last character will be in the wrong location.
Video: https://gfycat.com/plaintiveimaginativeiberianemeraldlizard
As you can see, when strictly using keyboard to type +37253078448, then the actual result is +37253087844. This seems to happen with all valid 8-character Estonian phone numbers, another example: +37251234567.
Steps to Reproduce
- Go to https://patw0929.github.io/react-intl-tel-input/?selectedKind=Documentation&selectedStory=Playground&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybooks%2Fstorybook-addon-knobs
- Set
format
prop totrue
. - Write the characters to the phone number field +37253078448
- Observe that the cursor will move before entering the last number
Environment
- Version: 8.0.2
- Browser: Tested on Safari and Chrome MacOS and both have this. Probably not browser-specific issue.
Details
From looking at code, it seems that the issue is with the getCursorPositionAfterFormating
method.
I created the following test code which actually returns 4, instead of 7.
previousStringBeforeCursor = '+3725307844'
previousString = '+3725307844'
nextString = '5307 844'
expect(
utils.getCursorPositionAfterFormating(
previousStringBeforeCursor,
previousString,
nextString
)
).toEqual(7)
Any updates on this yet?
I am experiencing the same issue, cursor jumping around unexpectedly after typing a few characters, regardless of the format
prop being true or false
Experiencing the same issue, any update on this?