vlad-ignatov / react-numeric-input

Numeric input component for react
MIT License
280 stars 104 forks source link

i18n formatting issue #30

Open reynacho opened 7 years ago

reynacho commented 7 years ago

When using this in combination with the react-intl library, the formatting seems to cause issues. I have the following code:

`<NumericInput className="k-textbox" value={this.props.motorVoltage} precision={0} format={num => { return this.props.intl.formatNumber(num); }} parse={num => { var regex = new RegExp("[^0-9\,-]+", "g"); var clean = String(num).replace( regex, ''); return parseFloat(clean);

}}
onChange={(valueAsNumber, valueAsString) => {this.props.onPropChange('motorVoltage', valueAsNumber)}} />`

The format function conversion the number to the i18n formatted version (for US it 1000 will be 1,000). The parse function reverses that formatting to a basic number (i.e. 1,000 becomes 1000 again).

What I'm seeing is if I type 1000, it correctly shows 1,000 in the input, but then if I type another 0 (i.e. trying to type 10000) instead of it showing 10,000 which I would expect, it shows 1. It seems that any action taken after getting the comma in the number breaks this completely. I would expect the input to rely entirely on the parse/format functions. My hunch is that there is a parseFloat being used somewhere instead of the _parse function

vlad-ignatov commented 7 years ago
  1. Can you provide a link?
  2. Yes, parseFloat is used internally but that shouldn't matter: https://github.com/vlad-ignatov/react-numeric-input/blob/master/src/NumericInput.jsx#L547
  3. Perhaps your RegExp should look for dots instead of commas?
Tomekmularczyk commented 7 years ago

The same here.

When I try to use formatting from react-intl library then strange behavior happen.

  formatToCurrency = (value) => {
    const price = this.props.intl.formatNumber(value, { style: 'currency', currency: 'USD' });
    return price;
  };