DEV Community

Aashutosh Poudel
Aashutosh Poudel

Posted on

Issue with multiple buttons in Formik form

Here's an example codesandbox with a Formik.

https://codesandbox.io/embed/focused-ully-opvvmv?fontsize=14&hidenavigation=1&theme=dark

The form has two buttons: a Submit button that submits the form and navigates to the next page and a Copy button that copies the link typed by the user.

The problem:
When the Copy button is pressed the form is submitted and the page redirects to the next page. We only want the form to be submitted when the Submit button is pressed.

The solution:
Image description
By default any button without a type attribute defaults to type="submit". This causes the form to be submitted when the Copy button is pressed. To resolve this we need to explicitly pass the type attribute as button ie. type="button" for the Copy button.

Latest comments (0)