react-numeric-input
react-numeric-input copied to clipboard
i18n formatting issue
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
- Can you provide a link?
- Yes, parseFloat is used internally but that shouldn't matter: https://github.com/vlad-ignatov/react-numeric-input/blob/master/src/NumericInput.jsx#L547
- Perhaps your RegExp should look for dots instead of commas?
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;
};