Footer Buttons submit Form

[RocketDav1d]

First off, great component, thanks for building! When using the Footer component inside a Form component clicking any Footer Button will result in the submit of the form

I found a workaround which effectively prevents the submission of the form <Button size="sm" onClick={(event) => { if (!isLastStep) event.preventDefault(); nextStep(); }}> {isLastStep ? "Finish" : isOptionalStep ? "Skip" : "Next"} </Button>

[damianricobelli]

Hey @RocketDav1d thank you very much and also for your comment. I will review this detail in the next few days

[damianricobelli]

@RocketDav1d could you give me a complete example of your use case?

[ruru-m07]

need more info to resolve

[CosAnca]

A <button> without an explicit type placed inside a <form> has by default type="submit" which will...submit the form. More details here https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#type Shadcn UI <Button> component doesn't have a type assign to it by default, so you need to add type="button" to the <Button> component if you don't want it to submit the form.

[damianricobelli]

@CosAnca would you like to create a PR with the fix?

[abeisleem]

@RocketDav1d, ez set button type=button

ex:

<Button
  size="sm"
  type="button"
  onClick={(event) => {
    // if (!isLastStep) event.preventDefault(); // remove this preventDefault()
    nextStep();
  }}
>
  {isLastStep ? 'Finish' : isOptionalStep ? 'Skip' : 'Next'}
</Button>

I don't think this is PR worthy. It's a common behavior that the developer should be aware of.

[abeisleem]

Created a PR anyway to reflect this requirement in the form example

[damianricobelli]

Solved thanks to the fix in the example proposed by @abeisleem --> https://github.com/damianricobelli/shadcn-stepper/pull/6