How to fix the Formik form does not fire submit on return key press issue with React?

Sometimes, we want to fix the Formik form does not fire submit on return key press issue with React.

In this article, we’ll look at how to fix the Formik form does not fire submit on return key press issue with React.

How to fix the Formik form does not fire submit on return key press issue with React?

To fix the Formik form does not fire submit on return key press issue with React, we can add an input with the type attribute set to submit.

For instance, we write:

import React from "react";
import { object, string } from "yup";
import { Formik } from "formik";

const validationSchema = object().shape({
  email: string()
    .email("Please enter a valid email address")
    .required("Email is a required field"),
  password: string().min(8).required("Password is a required field")
});

export default function App() {
  return (
    <Formik
      initialValues={{
        email: "",
        password: ""
      }}
      onSubmit={(values) => {
        console.log(values);
      }}
      validationSchema={validationSchema}
    >
      {(props) => {
        const {
          values,
          handleChange,
          handleBlur,
          handleSubmit,
          errors
        } = props;
        return (
          <form onSubmit={handleSubmit}>
            <input
              value={values.email}
              onChange={handleChange}
              onBlur={handleBlur}
              name="email"
            />
            <p>{errors?.email}</p>
            <input
              value={values.password}
              onChange={handleChange}
              onBlur={handleBlur}
              name="password"
              type="password"
            />
            <p>{errors?.password}</p>
            <input type="submit" />
          </form>
        );
      }}
    </Formik>
  );
}

We define the validationSchema object with yup.

It checks for email and password requirements and return validation error messages if the values are invalid.

Then we add the form by wrapping a form element in the Formik component.

We set the initial values with the initialValues prop.

And we set the onSubmit prop to the submit event handler.

The values parameter has all the entered values.

And we set the validationSchema prop to the validationSchema object so we can use it for form validation.

Next, we add a render prop inside the Formik component which returns a form element with the props of the render prop function used throughout the form.

We set the value prop of each input to the values in the value prop property.

And we set onChange and onBlur to the functions in the prop.

Also, we set the name attribute for each input to match the field names in validationSchema so the validation can be done.

We display the form validation errors from the errors object.

Finally, we add an input with the type attribute set to submit to trigger run the submit event handler when the form values are all valid.

Therefore, when we type in valid values in each field, we see the values logged.

Conclusion

To fix the Formik form does not fire submit on return key press issue with React, we can add an input with the type attribute set to submit.