isDirty changing to true when no field is actually dirty

Right after I added:

    defaultValues: {
      "First name": "Name"
    },

If you click on a field and then outside (forcing a blur) the isDirty flag will change to true, but the dirtyFields will not change.

https://codesandbox.io/s/react-hook-form-formstate-dirty-touched-submitted-forked-7jn4k?file=/src/index.js

This was not the case with 6.7.2

[vvo]

Small note because I faced a similar issue @mackankowski, I had a defaultValues object that contained MORE properties than the actual fields that were registered through react-hook-form. Which triggered this weird state of isDirty: true while dirtyFields was {}.

I think it’s good that we enforce consistency here (fields in defaultValues must be the same as registered fields), but I wish it was more obvious that I made a mistake.

[vvo]

At this point I think I was born to discover edge cases. Welcome to another episode of “Dirty Or Not, Here I Come”.

Here’s another case of dirty going for true and never going back to false afterwards. Let’s say you’re building a form that as a number selector (<input type="number") AND you pass it actual number values (to defaultValue and defaultValues) this way:

const numberValue = 10;

const form = useForm({
  defaultValues: {
    numberField: numberValue
  }
});

You’ll get in trouble! Why? Because a number input value is actually … a string! So when react hook form compares “10” to 10 to check for dirty state it will say it’s dirty, while it’s not from your POV.

I wonder if I am doing something wrong OR not doing something right as for serialization between my form and my actual data types… Any idea? Should we do a bit of type checking between defaultValues and form values? So we could warn in console like “numberField defaultValue was a number but form says it’s a string, you might want to double check that”.

WDYT?

Thanks!