Cursor moves to wrong location when entering number with country code

[laurglia]

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

1. 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
2. Set format prop to true.
3. Write the characters to the phone number field +37253078448
4. 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)

[28development]

Any updates on this yet?

[slutske22]

I am experiencing the same issue, cursor jumping around unexpectedly after typing a few characters, regardless of the format prop being true or false

[NwosaEmeka]

Experiencing the same issue, any update on this?