allowDecimalSeparators does't always work correctly when paste a number into the input

[tenkij]

allowedDecimalSeparators={[",", "."]}

decimalSeparator='.'

1. paste '11.11', result '11.11';
2. paste '11,11', result '1 111'

decimalSeparator=','

1. paste '11.11', result '1 111';
2. paste '11,11', result '11,11'

https://codesandbox.io/s/react-number-format-demo-f7245

[dfyz011]

i have same issue

[obrejla]

Hi. Same issue here...:/

[ArtemShirshov]

Hi, @s-yadav
This problem is still relevant today

[farmer911]

@tenkij thank for your code-pen i had fixed the issue. Love you 3000

Hi @s-yadav,
Same problem here ;)

[jafidiesel]

I'm not very sure but i think maybe it's forcing formatting the value since it's a number greater than a thousand. By default if thousandSeparator prop it's not present it shouldn't force formatting, but it's a posibility.

[Toumash]

Still relevant today. Any idea how to fix it? Maybe i'll be able to provide a PR, but i need some guidance

[nikhil-varma]

@Toumash That would be great! Let me know how I can help you with this! Thanks!

[Toumash]

@nikhil-varma You can review the attached PR :)

[Toumash]

For those who are waiting for the PR to be merged: you can use this customInput hack

const DemoField =  useMemo(() => NumberFormatCommaPasteHackTextField(setValue), []);

// HACK: replace with normal TextField after this PR is merged https://github.com/s-yadav/react-number-format/pull/556
const NumberFormatCommaPasteHackTextField = (setValue) =>
  (props) => {
    return <TextField
      {...props}
      onPaste={(e) => {
        let pastedText = e.clipboardData.getData('text');
        if (pastedText.indexOf(',') !== -1) {
          e.preventDefault();
          setValue(pastedText.replace(',', '.'));
        }
      }}
    />
  }

return  <NumberFormat
        customInput={DemoField}
        allowedDecimalSeparators={[",", "."]}
        decimalSeparator={'.'}
        thousandSeparator=" "
      />