Theo's Typesafe Cult•8mo ago

any button even when explicitly mentioned as type="button" triggers form submission

I'm using the Form component inside the dialog component by shadcn/ui I have a button inside the form which is explicitly mentioned as type="button" but still triggers form submisson. This is the button inside the form:

<Button
  onClick={(e) => {e.stopPropagation(), e.preventDefault(), onInstrumentModalOpen()}}
  type="button"
  className="mt-1 flex w-full items-center justify-center"
>

<Button
  onClick={(e) => {e.stopPropagation(), e.preventDefault(), onInstrumentModalOpen()}}
  type="button"
  className="mt-1 flex w-full items-center justify-center"
>

and this is the actual submit button:

<Button disabled={loading} type="submit">
  Continue
</Button>

<Button disabled={loading} type="submit">
  Continue
</Button>

3 Replies

Mike•8mo ago

Just a sanity check: is the <Button type="submit"> between the opening and closing tags of the form?

BootesVoid•8mo ago

yes it was well it was a silly problem I wasnt checking the right page for the updates

Mike•8mo ago

Happens to all of us haha, I'm glad you figured it out!

Gaming

Programming

any button even when explicitly mentioned as type="button" triggers form submission