Formik: Does Formik not handle submit on enter?

[IanBarbour]

Should I implement my own onKeyPress functionality or is there a way to handle this within the tools supplied in Formik?

Thanks!

[KidkArolis]

I was just solving a similar issue, I've included a visually hidden element in my forms. This is when the default submit button is not within

, e.g. in a modal footer. Maybe that helps!

[KidkArolis]

• This way hitting enter anywhere in the form triggers submit event and Formik picks that up.

[jaredpalmer]

You maybe hitting the known input autofill React bug. Here is the umbrella issue: https://github.com/facebook/react/issues/11097

If you can provide a codesandbox we can then debug together

[jaredpalmer]

Generally tho, you should not implement onKeyPress

[justincy]

I ran into the same issue with a form in a dialog where the submit button was outside the form in the dialog footer. I fixed it the way @KidkArolis suggested with a hidden input.

[GomatoX]

I had a similar problem. Issue was that in my custom Input component I was passing props to the actual <input {...props} /> element (it's not good). But actual reason was that props had formik form object so if you want to use spread you have to unsed form object from props. e.g.:

const Input = ({ label, field, ...props }) => {
  delete props.form;

  return (
    <div className="some-class-name">
      <input {...field} {...props} />
    </div>
  );
};

or predefine all possible attributes manually

[kelly-tock]

I am not passing along the form prop into my custom input, I have a type=submit on the button, and am using the <Form> component. I tried manually doing onSubmit, onReset, also on the submit button, but hitting enter does not seem to fire any submit. clicking on the submit button does though, even when there is no click handler on it.

😢

[kelly-tock]

with no custom input, my form is working with pressing enter. what else could cause this? I have a custom on change as well, maybe something with the events?

[GomatoX]

I am not passing along the form prop into my custom input, I have a type=submit on the button, and am using the <Form> component. I tried manually doing onSubmit, onReset, also on the submit button, but hitting enter does not seem to fire any submit. clicking on the submit button does though, even when there is no click handler on it.

😢

What version of formik do you use?

[kelly-tock]

1.5.8

[kelly-tock]

I’ll post back when I figure it out. I started with the docs example in my form and am adding my customizations in one by one

[johnrom]

the answer to this particular issue is "yes it works" as long as

1. the props passed to your are correct and do not interfere with normal HTML form submission, as outlined below

   <input form="{}" /> // associates input with a different form (or no form), so enter doesn't work in this input
   <input onChange={event => event.preventDefault()} /> // cancels enter button propagation to html form

1. You have a submit button _that doesn't have a form={} prop_, inside of your Form

    <Form>
        <input type="submit" form={} /> // manually changes form association
    </Form>
    <input type="submit" /> // doesn't associate submit with Form, so enter is not triggered

@kelly-tock if you think you've found a different bug which otherwise prevents formik's submission, feel free to open a separate issue and try to replicate in a code sandbox. @IanBarbour does this info help close out your issue?

[schmitch]

actually I have a textarea field/form, which does not work:

<Formik onSubmit={createComment} initialValues={formData} render={props =>
                <Form>
                    <div className="row my-2">
                        <div className="col-xxl-8 col-xl-6 col-12">
                            <h3>Kommentare</h3>
                        </div>
                        <div className="col-xxl-4 col-xl-6 col-12">
                            <button type="submit"
                                    className="btn btn-sm btn-success-flat float-right w-100"
                                    disabled={buttonDisabled}>
                                Hinzufügen
                            </button>

                        </div>
                    </div>

                    <div className="row mb-2">
                        <div className="col-12">
                            <Field component="textarea" rows="2" cols="20" className="form-control" name="value"
                                   required/>
                        </div>
                    </div>
                </Form>
}/>

[johnrom]

@schmitch I believe you have to do control+enter in order to get that working. Either way it's a bit different than this original issue which is whether the Formik component handles submit on Enter, while that refers to the specific field. Try asking your question in the Discord channel or opening a new issue with a CodeSandbox reproduction of your issue.

[KSVarun]

I was just solving a similar issue, I've included a visually hidden element in my forms. This is when the default submit button is not within

, e.g. in a modal footer. Maybe that helps!

Can you please let know how you did it. I am facing the same issue, where my submit is in my modal and pressing enter is not submitting the form

[steadylearner]

I had a problem with axios when used with Formik. It did continuously sent duplicate requests.

Then, I could find the problem while reading this issue. The problem came from the sumbit="button" that I used to send request with Formik.

<Button
   type="submit"
   disabled={isSubmitting}
   onClick={submitForm}
   fullWidth
   color="primary"
   variant="contained"
>

It is likely that when the type is set to "submit" it sends duplicate request.

So, I removed type="button" from the code and used the code similar to this.

<Button
   type="submit"
   disabled={isSubmitting}
   onClick={submitForm}
   fullWidth
   color="primary"
   variant="contained"
>
<input className="x-display" type="submit" />

and CSS

.x-display {
   display: none;
}

It solved both problem of duplicate request and using enter to submit the form.

First, I thought it was the proxy server problem that I was using but it was from the Formik.

Hope, this helps others later. I had to spend many times until I find this issue.

[johnrom]

@ksvarun if you provide a sandbox repro I can take a look at it. If your <input type="submit" /> is outside of your form, you can pass the form's ID to <input type="submit" form={formId} /> and most browsers should connect the dots and allow submission to take place automatically. Alternatively you can use a hidden <input type="submit" /> and separate <button onClick={submitForm}> to allow both keyboard and button submits.

[timstallmann]

I'm running into this issue on a project as well and none of the solutions in the thread work -- is this still waiting on an upstream fix for https://github.com/facebook/react/issues/11097 ?

[johnrom]

@timstallmann submit on enter works. If that React bug is affecting you, you'll have to wait for that upstream, but generally enter triggers formik submit.

If you provide a codesandbox repro it'll be easier to discuss the issue you're having.