Formik custom input not submitting on enter

When using custom components with Formik, a common problem to run into is some native form events breaking. One obvious symptom is the form not triggering a submit when you press enter in an input field, but there are others.

The problem will arise if you incorrectly pass all props straight through to the custom component. As demonstrated in the docs above, you must remove the form props before passing the rest on to the custom component.

Shortly put, this is incorrect:

const CustomInput = (props: React.InputHTMLAttributes<HTMLInputElement> & FieldProps) => {
  return <input {...props} />;
};

And this is correct:

const CustomInput = (props: React.InputHTMLAttributes<HTMLInputElement> & FieldProps) => {
  const { field, form, ...rest } = props;
  return <input {...field} {...rest} />;
};