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: facebook/react#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

2. 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 facebook/react#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.

[bryndyment]

Make sure your input field is wrapped within <Form> … </Form> 😅

[zackdotcomputer]

I was running into this and got it fixed thanks to some tips in SO. The three things I found that affected this issue:

1. You need a type="submit" component. I recommend using an input because it worked most reliably for me.
2. Ideally, your submit component needs to be inside your <form> tags. I haven't tested the form= prop mentioned above.
3. Important: Your input needs to be visible when your form is painted by the browser. If you throw it in with 0-size or display: none, modern browsers won't turn on the "enter = submit" behavior we want. If you zero-size it with overflow: hidden after the component has mounted, though, you will still get the desired behavior as of Feb 2021...

[johnrom]

Yeah by hidden you'll definitely want to do something like the screen reader text class not only for reasons of Browser Compatibility, but so that screen readers will also understand there is a button that can be interacted with.

[ncoughlin]

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.

😢

You may be experiencing a similar issue to what I was, and I was able to solve it. My problem was that I had another button on the page that did not have a "type" defined. Therefore when pressing Enter the browser was finding the first button on the page, assumed it was the submit button because the type was not defined, and firing that instead. Make sure that all buttons on your page are defined as type=button except for your actual submit button.

[github-actions]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 60 days

[himanshuReact]

onClick={submitForm} this really helped