issue: isValid state does not work in Stepper form

[jenniredfield]

Version Number

6.14.0 but also seen on 7.33.0

Codesandbox/Expo snack

https://codesandbox.io/s/heuristic-lehmann-df6hmw

Steps to reproduce

Hello, I'm having this problem with isValid state when using react-hook-form on a stepper. The state of isValid seems a bit messed up when we use a back button. For example, if first step is valid and you go on to the next, trigger an error and go back, isValid will be false even though the first step is still valid.

This is a problem because I would like to use isValid as the state for the 'next' button to be disabled or not.

Is there any suggestions how to get this working or is it a bug?

Or is there another suggestion for what variable to use to disable the button?

1. Go to this CSB https://codesandbox.io/s/heuristic-lehmann-df6hmw
2. Enter first name
3. Enter last name
4. Click Next
5. Don't fill in address, click Next to trigger error
6. Click Back
7. See that Next button is greyed out on first step, even though the step is still valid.

Expected behaviour

isValid should match the valid state of current step

What browsers are you seeing the problem on?

Chrome

Relevant log output

No response

Code of Conduct

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

[Moshyfawn]

RHF works correct in your use-case.

You trigger the second step validation by clicking "Next", but going back via "Back" button, you only update the form's step, but not the form validation state. Hence, the form's isValid state is not updated.

Validation state is not being updated because your "change" your validation schema; the validation process is not triggered by it.

[jenniredfield]

Thanks for your answer.

Is there any suggestion how to use isValid on a stepper? If I try to manually trigger it when user goes back, it initially works but then eventually goes out of sync again when you go forward - then the button will not be grayed out when you go forward again.

[rootkowsky]

Little bit tricky suggestion, but it should work.

Just add a "dummy" input to the every single step:

<input
      key={stepId}
      type={'hidden'}
      {...register(`stepId-${stepId}`, {
        shouldUnregister: true
      })}
    />

Notice that there is shouldUnregister option provided

[jenniredfield]

Hi @rootkowsky could you fork the codesandbox and provide an example? I tried it and it didnt work.

[rootkowsky]

here you are:
https://codesandbox.io/s/jovial-swartz-t31nu3

notice that I had to update react-hook-form version (to the newest, v7) because on your version (v6) it did not work

[jenniredfield]

Amazing! This did work indeed. 😁
I'm not quite sure why it works though? 😅 Is it because you are destroying and unregistering the hidden input when you go forward, and when you go back it mounts and register again, and somehow isValid is updated again against current validation?

[wansiedler]

works!

[iamciro]

Still happening and this workaround works!

[LienardEdwin]

Hello ! i found a better way to fix this issue, and avoid "dummy" inputs,

use isValid from useFormState()

  const { control, formState: { errors } } = useFormContext();

  const { isValid } = useFormState({
      control
  });