Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
tenkij opened this issue Oct 2, 2019 · 10 comments

Comments

@tenkij
Copy link

tenkij commented Oct 2, 2019

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
Copy link

dfyz011 commented Apr 30, 2020

i have same issue

@obrejla
Copy link

obrejla commented Sep 21, 2020

Hi. Same issue here...:/

@ArtemShirshov
Copy link

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

@farmer911
Copy link

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

@LeComptoirDesPharmacies

Hi @s-yadav,
Same problem here ;)

@jafidiesel
Copy link

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
Copy link

Toumash commented Jun 22, 2021

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
Copy link
Collaborator

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

@Toumash
Copy link

Toumash commented Jun 23, 2021

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

@Toumash
Copy link

Toumash commented Jun 24, 2021

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=" "
      />

Toumash added a commit to Toumash/react-number-format that referenced this issue Jun 24, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

8 participants