s-yadav / react-number-format

React component to format numbers in an input or as a text.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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

hamiidrahmani opened this issue · comments

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)

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);
  };