decimalScale number: input not blocked if I've already used all the digits

[caneta]

Describe the issue and the actual behavior

I use numeric format with decimalScale={3} as depicted in the documentation. If I've reached the maximum number of digits already, in the doc example it's 3, I'm not blocked if I try to insert more digits: they overwrite the previous ones.

Describe the expected behavior

Because the number of decimal digits is fixed to 3, I would expect that I was blocked in inserting other digits. If I want to change "333" into "123", I need to delete the previous digits before.

Provide a CodeSandbox link illustrating the issue

It's the one in the docs.

Provide steps to reproduce this issue

If I put my cursor immediately after the dot and type "123" the previous "333" representing the decimal part is overwritten.

Please check the browsers where the issue is seen

• [X] Chrome
• [ ] Chrome (Android)
• [ ] Safari (OSX)
• [ ] Safari (iOS)
• [X] Firefox
• [ ] Firefox (Android)

[s-yadav]

The behavior is intentional. If you want to block the user from typing at all, you can do something like this.

<NumericFormat value={12323.333} isAllowed={({value}) => {
          const decimalValue = value.split('.')[1];
          return !decimalValue || decimalValue.length <= 3;
        }} />

Here's a codesandbox: https://codesandbox.io/s/decimalscale-demo-forked-fwtsyd?file=/src/App.js

[caneta]

Do we have some hope to get this feature as a prop in a next release?

[s-yadav]

As it can be handled with existing props, I would avoid adding a new prop. That causes a maintenance cost.

[caneta]

I've tried the snippet you provide, but it does not work as expected: the integer part is not modifiable. My expectation would be that only the decimal part should be fixed: having 12345.555, I must be able to change it to 12345678.555; only the decimal part, if fixed to 3, for example, should remain not changeble.

[s-yadav]

Ohh the above codesandbox had a bug. the passed value had 4 decimal values so isAllowed was always giving false. You can change the number to have 3 decimals before passing it as value. See the updated sandbox.

<NumericFormat
    value={value.toFixed(3)}
    isAllowed={({ value }) => {
      const decimalValue = value.split(".")[1];
      return !decimalValue || decimalValue.length <= 3;
    }}
  />

https://codesandbox.io/s/decimalscale-demo-forked-fwtsyd?file=/src/App.js:260-487

[caneta]

Ok, thanks for the fix. Now I can change the integer part and not the decimal one, fine. The only remaining thing is that the cursor continues moving from left to right on the decimal part, even if it does not change it...This happens only if I type the exact digit I'm currently on, i.e.: 12345.333, I'm moving if typing only "3" on the decimal part