issue: Form state not updating when setting field's value using the setValue() hook

[sabres207]

Version Number

7.45.4

Codesandbox Example

https://codesandbox.io/s/react-hook-form-with-yup-forked-kgxsfn?file=/src/App.js

Steps to reproduce

1. Go to the example codesandbox
2. Click on submit
3. See validation error
4. Click on "set mock email"
5. See validation error not going away
6. Change one letter in email
7. Validation error is gone now

Expected behaviour

calling setValue('fieldName', 'some data'), should not be outside of form sync,
thus, in this case, it should change the errors / dirty states of the email field,
exactly like a user input would do.

if not, I guess there must be another way to make the form data in sync after calling setValue.
(trigger() / onSubmit(() => {})() are not good options, because for example, if calling setValue before the user submitted the form, I don't want to show error messages yet)

What browsers are you seeing the problem on?

Chrome

Relevant log output

logs of values and errors after each reproducing steps:
1.

{
    "errors": {},
    "values": {}
}

{
    "errors": {
        "password": {
            "message": "Required",
            "type": "required"
        },
        "email": {
            "message": "Required",
            "type": "required"
        }
    },
    "values": {
        "email": "",
        "password": ""
    }
}

3. --
4. --
5. --

{
    "errors": {
        "password": {
            "message": "Required",
            "type": "required"
        }
    },
    "values": {
        "email": "[email protected]",
        "password": ""
    }
}

No response

Code of Conduct

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

[Moshyfawn]

setValueis not a user input. You can think of it as a manual override of the value, hence the different behavior.

You can pass the shouldValidate flag to the setValue options to run the field validation.

const handleSetMockEmail = () => {
  setValue(
    "email",
    "[email protected]",
+   { shouldValidate: true }
  )
}

[sabres207]

@Moshyfawn thanks for the quick response, i didn't know that option.
It still not exactly enough for my needs, because I want to make that field revalidate and add or remove its error accordingly, but I only want it to happen if the user already clicked at least once on submit, because before that I don't show error messages at all in that form.

is there a way to do that?

[Moshyfawn]

You can get reference to the isSubmitted form state to check against to set shouldValidate dynamically

const { formState } = useForm()
const { isSubmitted } = formState

const handleSetMockEmail = () => {
  setValue(
    "email",
    "[email protected]",
    { shouldValidate: isSubmitted }
  )
}

[lukasvice]

Unfortunately, this approach does not work properly. The formState does not change, when the form has not been submitted.

Here's an example: https://codesandbox.io/p/sandbox/objective-waterfall-sk65r2?file=%2Fsrc%2FApp.tsx%3A64%2C1

I want the submit button to be disabled if the form is invalid. I have a clear button that sets the input field to an empty string. Using setValue with shouldValidate updates the form state, but also displays the error message even if the form has not been submitted. setValue without shouldValidate, on the other hand, does not update the form state.

Is there a way to always have the correct formState without displaying the field error message (when the form has not been submitted)?