React-hook-form isValid not working in stepper when going back

Question

I posted this question on react-hook-form issues but thought of posting here too in case anyone found a solution for it.

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?

Steps to reproduce

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

React hook form version: 6.14.0 but also seen on 7.33.0

Answer 1

EDIT: For anyone having the same problem.. someone answered my question on react-hook -form's discussion page.

• Add to each step a dummy hidden input with shouldUnregister: true and unique name

      <input
        type="hidden"
        {...register("step1", {
          shouldUnregister: true
        })}
      />

This makes the isValid state somehow refresh when going backwards and forwards in the stepper.

CSB with this solution, see different step components: https://codesandbox.io/s/jovial-swartz-t31nu3?file=/src/steps/Step1.js:299-419

Github discussion: https://github.com/react-hook-form/react-hook-form/discussions/8787