damianricobelli/stepperize

React Hook Form back button doesn't work if you add more than 3 steps

Opened this issue · 2 comments

Describe the bug
Looking at the react hook form examples, if you add another step within that example the back button doesnt work within the newly created steps.

To Reproduce
Steps to reproduce the behavior:

  1. Add a new step within the existing example
  2. Navigate to the new step, and then try the back button.

Expected behavior
Should go to previous step

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

  • OS: IOS
  • macOS: 14.7 (23H124)

Smartphone (please complete the following information):

  • Havent tested

Additional context
Add any other context about the problem here.

I had the same issue. I solved it by adding e.preventDefault() to the button that triggers the stepper.prev() action:

<Button
    className="w-36"
    variant="outline"
    onClick={(e) => {
        e.preventDefault();
        stepper.prev();
    }}
    disabled={stepper.isFirst}
>

You just have to add the type="button" attribute for the "prev" button.
Ekran Resmi 2024-11-06 22 23 24