Wizard example bug - validation between steps

Are you submitting a bug report or a feature request?

🐛

What is the current behavior?

1. Fill in firstName and lastName to be able to proceed to step 2
2. Don’t touch any field, go back to Step 1
3. Don’t touch any field, go forward to Step 2 <---- Don’t allow me to

• Step 2 is validated at render-time, so it’s invalid at the start (check console log to see that validate() was called)
• Going back doesn’t stop me, even if that step 2 is invalid
• Going forward stops me, even if step 1 is valid (but step 2 isn’t)

What is the expected behavior?

• Allowing me to go to step 2 -> 1 -> 2
• Only validating the current step unless I’m on the last step, then validate the full thing?

Sandbox Link

Official example from docs: https://codesandbox.io/s/github/final-form/react-final-form/tree/master/examples/wizard?from-embed

My version: https://codesandbox.io/s/wizard-example-iqycj

What I changed:

• Removed per-field-validation on firstName and lastName and handled them in the validate() function (same as step 2 validations)

What’s your environment?

"final-form": "4.18.5", "react-final-form": "6.3.0",

Other

I understand that it’s up to us to handle the validations, and that final-form only provides the validate prop, but as this example is official in your docs, I assume it should work.

[kg-currenxie]

Update: While trying to refactor, I accidentally made a change that actually fixed the bug

Before:

      <Form
        initialValues={values}
        validate={this.validate}

After:

      <Form
        initialValues={values}
        validate={(values) => {
          return this.validate(values)
        }}

PS: I have actually no idea why this fixed it. It seems like it should behave the same…? But after applying this fix; I’ve played around with the form trying to reproduce the bug, and I CAN’T 😃 Reverting it, would immediately reproduce it.

[eddythemeddy]

@kg-currenxie No worries mate i fixed it, you were right about the validate. Thing is I was using the Wizard as well, so I had to set it up properly in both places. Got it working 😃. Thanks though!