isDirty issue with react hook form and react number format

Question

I'm using react-number-format with react-hook-form Controller for a currency input.

The formState does not update correctly: isDirty and dirtyFields do not seem to update when editing the masked number input and then deleting the text.

I set the defaultValues to '' (empty string).

If I input a number, I can see that isDirty is true. But if I delete the input, and the value is '' (empty string) I still see isDirty is true - but the value is exactly the same as the defaultValue.

Answer 1

The issue is with line 54 in the file masked-hook-form-inputs.js:

onChange(values.floatValue); the value of floatValue can be undefined, and this caused the problem.

The solutionn Change line 54 to onChange(isNaN(values.floatValue) ? '' : values.floatValue);

Note that it's better to use '' (empty string) and not null.