Disable submission on enter

[antarikshray]

The form triggers the onSubmit function by pressing enter on any of the fields.
Is it possible to disable this and trigger only when a button of submit type is clicked?

[johnrom]

NOTE! This is questionable at best for accessibility. Some users traverse forms with only the keyboard, so you should confirm this works with only the keyboard.

This is an event which React gets from HTML. HTML forms naturally submit when the user presses enter anytime there is a submit button. You can either remove the "<button type="submit" /> and replace it with a non-submit button which triggers formik.handleSubmit(event) on click, or follow any of the other recommendations on various StackOverflow issues.

One Formik-specific example would be to replace Formik's <Form /> helper component with a regular form, and replace its onSubmit:

const MyForm = () => {
  return <Formik {...formikProps}>
    {({ handleSubmit }) => 
      <form onSubmit={e => {
        e.preventDefault();

        // I made this up, you'll have to test this out. If you put together a codesandbox I can take a look.
        // I added a catch here in case the user hits enter on the button itself
        if (e.type !== "keydown" || (e.target && e.target.type === "submit")) {
          handleSubmit(e);
        }
    }
}

Alternatively you could instead create your own reusable EnterBlockingForm component which uses const { handleSubmit } = useFormikContext();.

const EnterBlockingForm: React.FC = (props) => {
  const { handleSubmit } = useFormikContext();

  return <form 
    onSubmit={e => {
        e.preventDefault();

        // I made this up, you'll have to test this out. If you put together a codesandbox I can take a look.
        // I added a catch here in case the user hits enter on the button itself
        if (e.type !== "keydown" || (e.target && e.target.type === "submit")) {
          handleSubmit(e);
        }
    }
  >
    {props.children}
  </form>
}

const MyForm = () => {
  return <Formik {...formikProps}>
    <EnterBlockingForm>
      <Field name="firstName" />
      <button type="submit">Submit</button>
    </EnterBlockingForm>
  </Formik>
}