Stay in the current step

[Baoyuantop]

In a Step, my target is a form; When the user clicks Next, I check if the form is completed before deciding whether to go to the next step. Otherwise, it stays in the current Step.
I've done the rest of the logic, but what can I do to keep the user at the current Step in some cases when they click Next?

[gilbarbara]

Hey @Baoyuantop

Are you using the stepIndex prop? With a controlled tour, you can decide when to move forward.
You could also use a custom tooltip and potentially hide the Next button until the user completes the form.

[gilbarbara]

But it doesn't work. isn't very helpful.
What happens?
Anyway, if the form checks fail, I don't think you should change the state.

Can you set up a simplified repro in codesandbox?

[Baoyuantop]

https://codesandbox.io/s/dreamy-kepler-z2cq12?file=/src/App.tsx

[gilbarbara]

Hey @Baoyuantop

The next button changes the internal state even in a controlled mode, so you can't use the controlled mode for what you need to achieve.
You can use a custom Tooltip that disables the Next button until the form is valid.

[gilbarbara]

Check this example: https://codesandbox.io/s/react-joyride-with-form-4vezxs

[Baoyuantop]

Thank you very much, I will try