react-numeric-input icon indicating copy to clipboard operation
react-numeric-input copied to clipboard

i18n formatting issue

Open reynacho opened this issue 8 years ago • 2 comments

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

reynacho avatar Jan 09 '17 20:01 reynacho

  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?

vlad-ignatov avatar Jan 10 '17 07:01 vlad-ignatov

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;
  };

Tomekmularczyk avatar Sep 18 '17 11:09 Tomekmularczyk