Formik form does not recognize Material ui Button

Question

I am building a login form with Formik with Materail UI, but Formik doesn't recognize Button of Material UI. If I replace the Button with html button everything works. Could anybody explain why it's not working with the Button component. Below is my code:

import React, { ReactElement } from "react";
import TextField from "@material-ui/core/TextField";
import FormControl from "@material-ui/core/FormControl";
import { Formik, Form } from "formik";
import { makeStyles } from "@material-ui/core/styles";
import Button from "@material-ui/core/Button";
import Box from "@material-ui/core/Box";

const useStyles = makeStyles((theme) => ({
  root: {
    margin: theme.spacing(1),
    width: 200,
    display: "flex",
  },
  input: {
    marginTop: 5,
    marginBottom: 5,
  },
}));

interface Props {}

export default function loginForm({}: Props): ReactElement {
  const classes = useStyles();

  return (
    <Box className={classes.root}>
      <Formik
        initialValues={{ username: "", password: "" }}
        validate={(values) => {
          const errors: { username?: string; password?: string } = {};
          if (!values.username) {
            errors.username = "Required";
          } else if (!values.password) {
            errors.password = "Required";
          }
          return errors;
        }}
        onSubmit={(values, { setSubmitting }) => {
          console.log("values: ", values);
          setSubmitting(false);
        }}
      >
        {({
          values,
          errors,
          touched,
          handleChange,
          handleBlur,
          handleSubmit,
          isSubmitting,
        }) => (
          <form onSubmit={handleSubmit}>
            <FormControl>
              <TextField
                className={classes.input}
                error={errors.username ? true : false}
                type="username"
                name="username"
                onChange={handleChange}
                onBlur={handleBlur}
                value={values.username}
                label="Username"
                variant="outlined"
                helperText={
                  errors.username && touched.username && errors.username
                }
              />
              <TextField
                className={classes.input}
                error={errors.password ? true : false}
                type="password"
                name="password"
                onChange={handleChange}
                onBlur={handleBlur}
                value={values.password}
                label="Password"
                variant="outlined"
                helperText={
                  errors.password && touched.password && errors.password
                }
              />
            </FormControl>
            <Box display="flex" justifyContent="space-between">
              <Button
                variant="contained"
                color="primary"
                disabled={isSubmitting}
              >
                Submit
              </Button>
               <Button
                variant="contained"
                color="secondary"
                disabled={isSubmitting}
              >
                Cancel
              </Button>
            </Box>
          </form>
        )}
      </Formik>
    </Box>
  );
}

please note the code above doesn't work, but if you replace Button with button, the form works.

Answer 1

In most browsers, a HTML button by default has the type=submit which means that Formik's submit handler will be called. A Material-UI button does not have this default so the submit handler will never be called. Try adding type=submit to your <Button> props.

(Also, check out Formik's Material-UI integration examples )

Answer 2

You should add the id to the form.

   <form onSubmit={handleSubmit} id="myForm">

And bind the form id with submit button

   <Button
     type="submit"
     form="myForm"
   >