title: reactjs - Formik form does not fire submit on return key press
body: <p>I have the following form written in React using Formik:</p>
  
  <pre><code>import React, { FunctionComponent } from 'react';
  import { NavLink } from 'react-router-dom';
  import { object, string } from 'yup';
  import { Formik, FormikActions, Field, FormikProps } from 'formik';
  import SimpleInput from './Fields/SimpleInput';
  import FieldError from './Fields/FieldError';
  
  interface FormValues {
    email: string;
    password: string;
  }
  interface OwnProps {
    onSubmit: (data: FormValues) =&gt; any;
  }
  
  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'),
  });
  
  type Props = OwnProps;
  
  const LoginForm: FunctionComponent&lt;Props&gt; = ({ onSubmit }) =&gt; {
    const initialValues = {
      email: '',
      password: '',
    };
  
    const onFormSubmit = async (values: FormValues, { setSubmitting }: FormikActions&lt;FormValues&gt;) =&gt; {
      await onSubmit(values);
      setSubmitting(false);
    };
  
    return (
      &lt;Formik
        onSubmit={onFormSubmit}
        initialValues={initialValues}
        validationSchema={validationSchema}
        render={({ handleSubmit, isSubmitting }: FormikProps&lt;FormValues&gt;) =&gt; (
          &lt;form className="ipx-form sign" onSubmit={handleSubmit}&gt;
            &lt;h1&gt;Sign in&lt;/h1&gt;
            &lt;div className="ipx-register-here"&gt;
              ( Don&amp;#39;t have an account? ) &amp;nbsp;
              &lt;NavLink to="/register"&gt;Register here&lt;/NavLink&gt;
            &lt;/div&gt;
            &lt;br /&gt;
            &lt;Field name="email" type="email" component={SimpleInput} label="Email Address" placeholder="Email" /&gt;
            &lt;FieldError name="email" /&gt;
            &lt;br /&gt;
            &lt;br /&gt;
            &lt;div className="fields"&gt;
              &lt;Field name="password" type="password" component={SimpleInput} label="Password" placeholder="Password" /&gt;
              &lt;FieldError name="password" /&gt;
            &lt;/div&gt;
            &lt;br /&gt;
            Forgot &lt;NavLink to="/forgot-password"&gt;password?&lt;/NavLink&gt;
            &lt;br /&gt;
            &lt;button className="button ipx-submit-button" id="ipx-login-submit" type="submit" disabled={isSubmitting}&gt;
              &lt;span className="ladda-label"&gt;Sign in&lt;/span&gt;
            &lt;/button&gt;
          &lt;/form&gt;
        )}
      /&gt;
    );
  };
  
  export default LoginForm;
  </code></pre>
  
  <p>Which works fine if I click the button to submit the form (it dispatches the Redux action and logs the user in), however when I try to submit the form with a Return/Enter key press it fails to catch the event. I tried logging the event in the <code>onSubmit</code> prop of the <code>&lt;form&gt;</code> element but no event is triggered on Enter press at all. This same form was previously written using <code>redux-form</code> and the Return key functionality worked as it should.</p>
  
  <p>I initially thought it might be due to the asynchronous form handling but I switched to a regular synchronous function and it did not work as well.</p>
  
  <p>Has anyone ever experienced something similar, and if so, please share any fixes.</p>
  
  <p>Thank you!</p>
  
  <p><a href="https://codesandbox.io/s/r4xzw0m1wn" rel="noreferrer">Codesandbox</a></p>