[BUG] UseStepForm from headless not working with zod

[BlackBearFTW]

Describe the bug

Hi,

I was trying to use the use-step -form from @refinedev/react-hook-form, however this doesn't properly work with zod validation. When you add validation, it will fail the validation since there aren't any values for the next steps yet, since that part of the form hasn't been filled in. However you cannot go to the next step when validation failed, so you are just stuck on the first step.

Steps To Reproduce

1. after installing refine, create a page, use the @refinedev/react-hook-form there with zod and zodResolver
2. create a multi step form, where one input is shown on the first step, while the other one is on the second step
3. Try to enter values into the first input, then try to click next
4. You will see that you cannot go to the next page
5. try to log the formstate.errors, you will see validation fails because of the second input

Expected behavior

Should only validate inputs visible in current step

Packages

@refinedev/react-hook-form

Additional Context

No response

[BlackBearFTW]

Just take one of the website examples: https://refine.dev/docs/packages/react-hook-form/use-steps-form/, then add zod resolver to it and create a zod scheme. You will see that you cannot go to the next page.

[alicanerdurmaz]

Hello @BlackBearFTW, thanks for the issue.

This bug occurs because when creating useStepsForm we render inputs based on the current step. Since the inputs of step 2 haven't been rendered yet in step 1, zod considers them as undefined and throws an error and If there's an error, goToStep doesn't work.

Right now, the core team's schedule is packed with Refine AI, but I'll try to find time to look into this bug next month. Of course, we'd be more than happy if anyone wants to work on it in the meantime! 🙌

[BlackBearFTW]

Hello @BlackBearFTW, thanks for the issue.

This bug occurs because when creating useStepsForm we render inputs based on the current step. Since the inputs of step 2 haven't been rendered yet in step 1, zod considers them as undefined and throws an error and If there's an error, goToStep doesn't work.

Right now, the core team's schedule is packed with Refine AI, but I'll try to find time to look into this bug next month. Of course, we'd be more than happy if anyone wants to work on it in the meantime! 🙌

@alicanerdurmaz even if you set the default value to "" and add another piece of validation (e.g. .min(1)) it will fail again. This is because unlike the UI packages, zod tries to validate the entire schema at once, where as the UI packages validate inline, meaning that they only validate the rendered fields.

Now this breaks the form since when you go to the next step it tries to run the zod validator, which fails and then doesn't allow you to go to the next step.

The only way this can be fixed is if you can somehow pass in a separate schema per step and it validates the scheme specific for that step.

[BlackBearFTW]

Another way that could work is if we can somehow only validate specific fields and you're able to pass in what fields you want to validate per step