Using decimalSeparator with a suffix containing more than one character brakes the seperator behavior

[musbou]

Describe the issue and the actual behavior

As stated in title, when using decimalSeparator in conjunction of a suffix with more than one character, typing the default separator . (or any other separator if you have a list allowedDecimalSeparator) does not move the caret. 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.

Having one character suffix fixes this issue.

Example of usage:

<NumericFormat
     value={0}
     decimalSeparator=","
     allowedDecimalSeparators={["%"]}
     decimalScale={2}
     suffix=" €"
/>

Describe the expected behavior

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

Provide a CodeSandbox link illustrating the issue

https://codesandbox.io/s/tender-dream-914v43

Provide steps to reproduce this issue

See codesandbox.

Please check the browsers where the issue is seen

• Chrome
• Firefox

[musbou]

After some further experimenting, it turns out that the presence of more than 1 character is the issue. I update the issue.

[romanopassalacqua]

I'm also facing this issue.

I did some debugging and the if in src/utils.tsx#L334 compares the inputted char (key pressed) with the formatted char. Should this if check for allowedDecimalSeparators and decimalSeparator? I think it has something to do with this if because if the key pressed is the decimalSeparator it works.

src/utils.tsx#L334

  for (let i = 0; i < curValLn; i++) {
    indexMap[i] = -1;
    for (let j = 0, jLn = formattedValueLn; j < jLn; j++) {
      // ↓
      if (curValue[i] === newFormattedValue[j] && addedIndexMap[j] !== true) {
        indexMap[i] = j;
        addedIndexMap[j] = true;
        break;
      }
    }
  }

---

Not sure if #673 could be related to this

[sormpe]

Hi,

I faced this issue too, and opened a PR to fix it. #743

[sormpe]

I tested v4.9.2 and it worked perfectly. Major changes in RNF v5 broke this.

[s-yadav]

This is fixed on v5.2.0

[TitoSniberb]

This is partially fixed. Now the caret does move but ONLY if there are a previous value. If the first thing you do is type in the decimal separator, the caret won't move.

This is pretty common usage when dealing with < 1 values, as you directly type , or . instead of 0