SubmitButton inside form tag with onSubmit handler causes submit handler to be called twice

If I set the htmlType to button, it won’t submit twice but form submit using enter key doesn’t work anymore.

Sample code:

<Formik initialValues={{ username: "", password: "" }} onSubmit={this.handleSubmit}>
  {props => (
      <form className={styles.login} onSubmit={props.handleSubmit}>
        <FormItem name="email">
          <InputField name="email" placeholder="Email" autoComplete="username"
                      prefix={<Icon type="user" style={{color: 'rgba(0,0,0,.25)'}}/>}/>
        </FormItem>
        <FormItem name="password">
          <InputField name="password" type="password" placeholder="Password" autoComplete="current-password"
                      prefix={<Icon type="lock" style={{color: 'rgba(0,0,0,.25)'}}/>}/>
        </FormItem>
        <FormItem>
          <SubmitButton className={styles.submit} type="primary" htmlType="submit" size="large">
            Login
          </SubmitButton>
        </FormItem>
      </form>
  )}
</Formik>

[jannikbuschke]

#29 I removed the custom onClick handler on the SubmitButton. Means a <form>, <Form> (formik helper) or <Form> (formik-antd) helper are needed for SubmitButton to work (as per your suggestion)

[jannikbuschke]

@n3v3rf411 I am not yet sure what the best approach here is. As a workaround (or solution?) you can set htmlType and onClick props of the SubmitButton like so:

<form onSubmit={props.handleSubmit}>
  <SubmitButton
    type="primary"
    htmlType="submit"
    size="large"
    onClick={() => {}}
  >
    Login 
  </SubmitButton>