The caret position isn't set properly when I use the removeFormatting function to use the Persian numbers with the thousandSeparator prop

[hamiidrahmani]

Describe the issue and the actual behavior

The caret position isn't set properly when I use the removeFormatting function to use the Persian numbers with the thousandSeparator prop, It should be fixed at the last item of input when I'm writing.

Describe the expected behavior

I think it should be considered to detect automatically where the caret position is when I'm typing.

Provide a CodeSandbox link illustrating the issue

https://codesandbox.io/p/sandbox/custom-numeral-numer-format-forked-qsy7ft?file=%2Fsrc%2FApp.js%3A12%2C31
Also, I provide a video to give a good understanding:

Screen.Recording.2024-04-09.at.1.53.18.AM.mov

Provide steps to reproduce this issue

Please check the browsers where the issue is seen

• Chrome
• Chrome (Android)
• Safari (OSX)
• Safari (iOS)
• Firefox
• Firefox (Android)

[hamiidrahmani]

I traced back the issue, It seems that we need to modify the isCharacterSame function, because currentValue and formattedValue differ in the last character position for Persian input.

const _isCharacterSame: IsCharacterSame = (ref) => {
    ref.currentValue = persianToEnglishNum(ref.currentValue);
    return isCharacterSame!(ref);
  };

[Melancholism]

@hamiidrahmani Could you please share the complete code.

[hamiidrahmani]

@hamiidrahmani Could you please share the complete code.

Only pass the function to NumberFormatBase, something like this:

const {  isCharacterSame, ...numericFormatProps } = useNumericFormat();

const _isCharacterSame: IsCharacterSame = (ref) => {
    ref.currentValue = persianToEnglishNum(ref.currentValue);
    return isCharacterSame!(ref);
  };


<ReactNumberFormatBase
      {...numericFormatProps}
      isCharacterSame={_isCharacterSame}
    />