React hook form example lets user go to other steps without validation
kodobrody opened this issue · 1 comments
Describe the bug
In your documentation you have react hook form example. When user does not fill the fields and clicks "Next" it triggers validation, which is wanted effect. However although the fields are blank, if he clicks on stepper buttons, then he can just go to any step he wants without any validation.
To Reproduce
[Steps to reproduce the behavior:
- Go to https://stepperize.vercel.app/docs/react/examples/react-hook-form
- Click on 'Payment' step
- The user is brought to the next step without validation
Expected behavior
It should validate all the steps inbetween the current step and the step user clicked on and bring him to the first invalid step or to the step he clicked on if all those steps inbetween are valid
Okay, I got into the library and see that it's not your library's side, which is fine, so, I wanted to create it myself.
const goToStep = (newStepId) => {
const currentStepIndex = stepper.current.index;
const newStepIndex = stepper.all.findIndex(step => step.id === newStepId)
const stepsToSkip = Math.abs(newStepIndex - currentStepIndex);
const direction = newStepIndex > currentStepIndex ? 'next' : 'prev'
for (let i=0; i<stepsToSkip; i++) {
stepper[direction]()
}
}
However, since in stepper.next()
and stepper.prev()
the counter is written eg like this: setCounter(counter + 1)
and not like this setCounter(prev => prev + 1)
it only skips one step at a time.