issue: isDirty and dirtyFields are not in sync

[mydesweb]

Version Number

7.27.0

Codesandbox/Expo snack

not provided

Steps to reproduce

I am not sure if it is an issue or this should be the expected behaviour, but if I:

1. change field value
2. change again the field value to its default value provided in defaultValues

isDirty is true but dirtyFields is an empty object
for me seems to be confusing

Expected behaviour

isDirty false
dirtyFields empty object

What browsers are you seeing the problem on?

No response

Relevant log output

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[bluebill1049]

please share a codesandbox and steps to reproduce: #2848

[mydesweb]

It took me some time to find the issue. The problem appear when I use setValue directly to change a field value, just like this setValue('option', '2'); . isDirty will become true but dirtyFields will not reflect what field was actually changed.

I also prepared an Expo Snack , but I think is not really necessary.

[Moshyfawn]

It took me some time to find the issue.
I also prepared an Expo Snack , but I think is not really necessary.

Thank you for the Expo Snack. It's common sense to provide a reproduction when you're asking for support. There was no setValue mentioned in the initial issue description and it's not our job to magically reproduce your environment and know what's causing the unwanted behavior.

To the question at hand, I suspect what you're experiencing is the expected behavior. isDirty form state tracks if any of the form values have been changed and dirtyFields state is.. well, the state of the fields.
There's a shouldDirty flag you can set to setValue to set the input related to the form field value updated to dirty.
For more info on the setValue refer it's RHF docs section

[mydesweb]

@Moshyfawn this is the idea, intentionally I did not set shouldDirty to true, probably in this case isDirty should remain also false? Otherwise isDirty and dirtyFields are not in sync

[Moshyfawn]

isDirty and dirtyFields aren't the same state. Other-wise they wouldn't be two different states.
isDirty is the form values state shows whether the form values are different from the defaultValues provided. dirtyFields is the state of inputs, not values. These two states are not supposed to be in sync.
setValue manual state change isn't treated the same as the user input by design. If you want the two states to by "synced", please, use the shouldDirty flag for setValue instead

[mydesweb]

@bluebill1049 @Moshyfawn sorry for not being clearly from the start, it was difficult for me to figure the real issue. Now I am ready to share the issue with you and steps to reproduce.

The Expo Snack has been updated.

1. for simplicity I change the color field in useEffect from white to black, the form is re-rendered and the following values are logged:

isDirty false
dirtyFields {}

2. change the email field by typing something, the next render will log:

isDirty true
dirtyFields {"email":true}

3. remove what you have typed in email field, to be again empty, the next render will log:

isDirty true
dirtyFields {}

can you see the issue now? in step 1 isDirty is false and in step 3 is true and will remain true from now on.

Note1. It does not make sense to have isDirty flag true without knowing exactly what was changed in our form. If you know that a field has changed why dirtyFields is not reflecting this change? For me it is very confusing, I use large/dynamic forms and it was difficult to understand what was actually changed. I highly believe that isDirty and dirtyFields should share the same state.

I also noticed that setValue('color', 'black', {shouldDirty: false}); or setValue('color', 'black'); does the same thing.

Note2. when shouldDirty flag is not configured you can actually know if it is dirty or not because I provided his default value in defaultValues and it is easy to know if its default value was changed or not.

[bluebill1049]

thanks for the expo snack.

let me explain:

you called this line which indeed changed isDrty, but because you are set not to report it.
setValue('color', 'black', {shouldDirty: false});

however, the next re-render will always seek the truth of your form dirtiness by comparing defaultValues with formValues.

• dirtyFields will mark the field dirty or not individually, we don't loop through the entire form value for performance reasons.
• isDirty will always do a deep equal against your defaultValues to determined form is dirty or not.

[Moshyfawn]

Pls ignore the above mentions, wrong link

[mydesweb]

@bluebill1049 I have some questions

1. why setValue can't work in the same way as field.onChange from useController ? field.onChange does a great job and mark correctly if a field is actually dirty or not
2. why you think you have to scan the entire form? when calling setValue you know exactly which field is going to change
3. how you change a field without making the form dirty? I was thinking setValue is actually designed to cover this scenario setValue('color', 'black', {shouldDirty: false}) - in my opinion should ignore the change in the form

In my opinion it's wrong by design to end having a dirty form without knowing what was actually changed.

[jcready]

This discrepancy is going to be the primary reason I have to replace this library with something else. This is really just the straw that broke the camel's back, but boy is it a heavy straw.

Here are some other annoyances:

1. No way to set the form state.
2. Parts of the form state are inaccessible: what are the current default values (ones set via reset())?

[tamir61]

Hey everyone, I've created a custom dev tool for react hook form that discovers scenarios such as why isDirty is true and dirtyFields is empty. I'll share it if I receive any requests... (Actually, I created it because I suffered from this unclear behavior)
It highlights any change between the default state and the current state. also support nested inputs.
It also log the path of the changed fields in the state

@bluebill1049 if you see this feature useful in the official dev tool, let me know.

[milosDf]

Here's my workaround - I created an extended version of useForm hook, which I call useVHook (but you can call it whatever you like. It has another additional check called isProperDirty which is basically going to check for number of dirty fields inside dirtyFields. If the result is zero, it's going to return false, meaning that the form is not dirty. Here it goes:

import {
  FieldValues,
  FormState,
  UseFormProps,
  UseFormReturn,
  useForm,
} from 'react-hook-form';

interface ExtendedFormState<TFieldValues extends FieldValues>
  extends FormState<TFieldValues> {
  isProperDirty: boolean;
}

interface UseFormReturnExtended<TFieldValues, TContext, TTransformedValues>
  extends UseFormReturn {
  formState: ExtendedFormState<TFieldValues>;
}

const useVForm = <
  TFieldValues extends FieldValues = FieldValues,
  TContext = any,
  TTransformedValues extends FieldValues | undefined = undefined,
>(
  props?: UseFormProps<TFieldValues, TContext>,
): UseFormReturnExtended<TFieldValues, TContext, TTransformedValues> => {
  const formMethods = useForm(props);

  return {
    ...formMethods,
    formState: {
      ...formMethods.formState,
      isProperDirty: Object.keys(formMethods.formState.dirtyFields).length > 0,
    },
  } as UseFormReturnExtended<TFieldValues, TContext, TTransformedValues>;
};

export default useVForm;