Thousand and decimal formatting broken while typing when valueIsNumericString is set to false with react-final-form

[Nico924]

Describe the issue and the actual behavior

When using react-number-format with react-final-form where I need to store the floatValue, if I set the parameter valueIsNumericString to false even if I provide a numeric value to NumericFormat, the formatting of the input text is not done while typing.
If I remove valueIsNumericString or if I set it to true (even with numeric value) or undefined, it works.

Describe the expected behavior

I would like the decimal and thousand formatting to work while typing.

Provide a CodeSandbox link illustrating the issue

https://codesandbox.io/embed/react-final-form-w-react-number-format-forked-7byc8q?fontsize=14&hidenavigation=1&theme=dark

Provide steps to reproduce this issue

Start writing anything in the input (adding 0 for example), no formatting will occur

[TheSharpieOne]

Running into this as well, but without react-final-form. From what I can tell, internally the value is always a string, and setting valueIsNumericString to false makes it not perform the string formatting (in fact, it makes it remove the formatting.)

Here is the code that is doing that:

react-number-format/src/utils.tsx

Lines 430 to 439 in 11af4c5

	if (isNil(value) || isNanValue(value)) {
	numAsString = '';
	formattedValue = '';
	} else if (typeof value === 'number' || valueIsNumericString) {
	numAsString = typeof value === 'number' ? toNumericString(value) : value;
	formattedValue = format(numAsString);
	} else {
	numAsString = removeFormatting(value, undefined);
	formattedValue = value;
	}

Now you may be thinking typeof value === 'number' would be true, we are supplying a number. But it is always a string at this point (when getting the input's value to be displayed). It uses roundIncomingValueToPrecision as the value when passing it to useInternalValues and returns formattedValue which isn't formatted in this case.

react-number-format/src/numeric_format.tsx

Lines 376 to 383 in 11af4c5

	const [{ numAsString, formattedValue }, _onValueChange] = useInternalValues(
	roundIncomingValueToPrecision(value),
	roundIncomingValueToPrecision(defaultValue),
	Boolean(_valueIsNumericString),
	_format,
	_removeFormatting,
	onValueChange,
	);

Here is roundIncomingValueToPrecision and you can see if the value is a number, it will make it a string

react-number-format/src/numeric_format.tsx

Lines 358 to 374 in 11af4c5

	const roundIncomingValueToPrecision = (value: string | number | null | undefined) => {
	if (isNil(value) || isNanValue(value)) return value;
	if (typeof value === 'number') {
	value = toNumericString(value);
	}
	/**
	* only round numeric or float string values coming through props,
	* we don't need to do it for onChange events, as we want to prevent typing there
	*/
	if (_valueIsNumericString && typeof decimalScale === 'number') {
	return roundToPrecision(value, decimalScale, Boolean(fixedDecimalScale));
	}
	return value;
	};

Here is that formattedValue being returned as value. This returned value is later passed to NumberFormatBase

react-number-format/src/numeric_format.tsx

Lines 479 to 490 in 11af4c5

	return {
	...(restProps as NumberFormatBaseProps<BaseType>),
	value: formattedValue,
	valueIsNumericString: false,
	isValidInputCharacter,
	onValueChange: _onValueChange,
	format: _format,
	removeFormatting: _removeFormatting,
	getCaretBoundary: (formattedValue: string) => getCaretBoundary(formattedValue, props),
	onKeyDown: _onKeyDown,
	onBlur: _onBlur,
	};

react-number-format/src/numeric_format.tsx

Lines 493 to 499 in 11af4c5

	export default function NumericFormat<BaseType = InputAttributes>(
	props: NumericFormatProps<BaseType>,
	) {
	const numericFormatProps = useNumericFormat(props);
	return <NumberFormatBase {...numericFormatProps} />;
	}

NumberFormatBase actually runs useInternalValues again. This time is it with the value from that previous run that is already a string at this point.

Here is a sandbox without final form:
https://codesandbox.io/s/float-value-demo-qrw2l7

Assuming what the above is correct, setting this to always be true would fix the issue since it is always passing a string to the function:

react-number-format/src/numeric_format.tsx

Line 379 in 11af4c5

Boolean(_valueIsNumericString),

OR after rounding, convert it back to a number.

The workaround (as mentioned in the original post) is to just set valueIsNumericString to true. This works as long as you are not passing a pre-formatted string.

[s-yadav]

@TheSharpieOne thanks for digging on this.
Yes, looks like a bug. I was doing some refactoring around guessing if a value is a numeric string based on the other formatting prop and value. Will fix it along with that. Will be available on the next release.

[jcrawl3y]

@s-yadav Confirming that this bug is occurring to me too. Do you have a rough estimate on when this fix will be available?

[s-yadav]

This is fixed on v5.2.0