Faulty decimal separator behaviour when using the suffix prop.

[fullyCommitted]

Describe the issue and the actual behavior

Example usage:

<NumericFormat
  type="text"
  allowNegative={false}
  valueIsNumericString={true}
  decimalScale={8}
  placeholder="Enter Amount"
  suffix=" USD"
  value={input}
  onValueChange={(values) => {
    setInput(values.value);
  }}
/>

If you enter the . character, it will leave the cursor before the dot and not after. So you'll be inputing whole numbers still, unless you use the mouse or arrow keys to navigate after the separator.

Removing the suffix prop fixes this issue.

Describe the expected behaviour

Inputing the decimal separate should leave the cursor after the separator.

Provide a CodeSandbox link illustrating the issue

https://codesandbox.io/s/hardcore-rgb-cmgb6f?file=/src/App.js

Provide steps to reproduce this issue

See codesandbox.

Please check the browsers where the issue is seen

• Chrome
• Safari (OSX)
• Firefox

[s-yadav]

Looks like a bug. Will check.