Prevent enter key from submitting

[ThinkSalat]

Hi,

I'd like to prevent the enter key from submitting. I have a MUI Textfield that I'm using as an autocomplete. If the user hits enter with the text that's entered, it creates a custom item. However, the form is submitting whenever I hit enter, which prevents my component's desired functionality.

I've scoured the web and nothing I've tried helps. The synthetic event passed to the onSubmit function on the form doesn't have a key or keycode so there's not way to know if the form was submitted using the enter key.

[bluebill1049]

i am afraid you will need to do something at onSubmit={() => //listen to the key press}

[ThinkSalat]

I removed onSubmit from the form element and removed the type="submit" from my button. I then used getValues({ nest: true }), formState: { isValid }, and triggerValidation() to handle what handleSubmit would have done.

[pramade]

I'm running into the same problem as you.
Do you have a working example for that ?
Thanks a lot !

[alpha-nome]

This is how I made it work. Please let me know if this works for you

Remove onSubmit from the form element and type=submit from button like @ThinkSalat said and then create a new function onSubmit.

const onSubmit = () => {
    //get filled values
    const val = getValues({ nest: true })

   //trigger validation on fields 
    triggerValidation()
    .then(value => {
        if (value){
          console.log("validation success")
        }
    })    
   
  };

Check this for triggers

[aaadryyy]

For those of you working on a multi-step form where trigger and getValues are not relevant you have to follow @bluebill1049 advice.

Here is the quick-fix I came up with :

  const checkKeyDown = (e) => {
    if (e.key === 'Enter') e.preventDefault();
  };

<form onSubmit={handleSubmit(onSubmit)} onKeyDown={(e) => checkKeyDown(e)}>
  // your steps here 
</form>

Simply add an onKeyDown on your form and manually prevent if 'Enter' is pressed.

EDIT in 2023:

• I had this same problem, searching for a solution, and found I was smarter in 2020!
• yes, changed e.code to e.key
• and also yes, @ceroy-ak 's solution below is much better (and typed)!

[cdialpha]

merci Adrien!

[didoshakra]

Thanks for the good solution, but now how to determine in which field Enter was pressed
const onKeyDown = (e) => {
if (e.key === "Enter") {
e.preventDefault()
if (?????.["skod"]) selectParam() //If Enter was pressed in the field
}
}

[sahilahluwalia]

Thanks Buddy!

[MoonSangJin]

Thank you!

[HEVpro]

Great solution, very elegant!

[ceroy-ak]

I found the simplest solution.

Just add
onKeyPress={(e:React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => { e.key === 'Enter' && e.preventDefault(); }}
eg.:
<input type="text" ref={register} name="name" required onKeyPress={(e:React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => { e.key === 'Enter' && e.preventDefault(); }}/>

on all your input fields or controllers
Don't use this in TextArea or any multiline input fields

[burakharun]

Thanks for this solution. I think this is more simple instead of @aaadryyy's solution. if you have too much forms, you have to write same "if check" everywhere. But with this solution you write just three lines code in your custom input and problem solves.

[rpatel15-hue]

for anyone else that stumbles upon this, onKeyPress is deprecated in favor of onKeyDown

[ChristopherKubis]

Thanks for share!

[christocarr]

This is the way

[I8Superman]

Except you have to add the onKeyPress to all of your inputs ...

[ravgeetdhillon]

To prevent inconsistent behaviour related to text areas, I have extended the solution provided by @ceroy-ak as follows. I have added a check for the element from which the event was raised. If it's a textarea, we can ignore the if condition.

Callback function

const preventEnterKeySubmission = (e: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => {
  const target = e.target as HTMLInputElement | HTMLTextAreaElement;
  if (e.key === "Enter" && !["TEXTAREA"].includes(target.tagName)) {
    e.preventDefault();
  }
};

And use on the form:

<form {...otherProps} onKeyPress={preventEnterKeySubmission} />

[maiaatala]

I got type error using HTMLInputElement | HTMLTextAreaElement so I made a slight adjustment that also seems to work

const preventEnterKeySubmission = (e: React.KeyboardEvent<HTMLFormElement>) => {
	const target = e.target;
	if (e.key === "Enter" && target instanceof HTMLInputElement) {
		e.preventDefault();
	}
};

and using on the form with

<form {...otherProps} onKeyDown={preventEnterKeySubmission} />

since onKeyPress was marked as deprecated for me

[HashRei]

Take care editionMode is not defined in your solution👀

[maiaatala]

thank you, good catch, I edited the code snippet

[Horsty80]

I'm facing this same issue for a simple input field with autocomplete.
The provided fix is working.
But it's not a long run solution if i need to add it on all form (html form) that i create.

Maybe possibility to add it when we init the form with useForm would be a good solution ?

[ravgeetdhillon]

You can actually create a wrapper component for your form. Then you can call your form wrapper wherever you want. This way you just have to add it to one place.

[syedmazharaliraza]

In addition to prevent form getting submitted, I want my focus to shift to next element. Any suggestion?

[I8Superman]

You would want to programmatically cause an tab kay event. Not sure how to do that.

[I8Superman]

This is without Typescript. No need to do anything to the form itself, but I put a function on each input.
.preventDefault() works on normal inputs and stopPropagation() must be used on textareas. I guess because in normal inputs the Enter key will directly trigger the submit function. In textareas, you want to keep the initial effect of the Enter key (= create a new line), but prevent it from propagating and ALSO triggering the submit function (or maybe I really don't get what's going on and just got lucky).

In your component:

const stopSubmit = (e) => {
        console.log(e.target.className)
        if (e.key === 'Enter' && e.target.className === 'input-field') {
            e.preventDefault()
        }
        if (e.key === 'Enter' && e.target.className === 'textarea') {
            e.stopPropagation()
        }
    }

On your input elements:

<input className='input-field' onKeyDown={stopSubmit}>

or

<textarea className='textarea' onKeyDown={stopSubmit}>

React Hook Form is smart, but it also cause a ton of other problems that are hard to solve, I think. Maybe I'm just to much a noob to get HOW much better it is than handling forms with standard React.

[Szorcu]

That's the solution that worked for me:

const handleKeyDown = (e: KeyboardEvent<HTMLFormElement>) => {
  const { key, target } = e

  if (key !== "Enter" || target instanceof HTMLTextAreaElement) {
    return
  }

  e.preventDefault()
}

<form {...otherProps} onKeyDown={handleKeyDown} />

[ghost]

I also had this problem and went with a different solution - posting in case this helps anyone.

I have a form that includes a "tags" input where pressing enter creates a new tag. Pressing enter was creating a new tag AND submitting the form, and preventDefault didn't fix this.

I ended up moving the offending input outside of the form element - I can still access the form properties from my input via the useForm hook.

I'd be the first to admit this isn't a great solution, particularly considering accessibility, as semantically the input is of course part of the form. But preventing submit on Enter is also not good for accessibility. Between me and my teammates we couldn't think of a solution with no downside.

My solution now looks like this

import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";
import { z } from "zod";

const editMediaFormSchema = z.object({
  mediaFileId: z.number(),
  displayName: z.string(),
  tags: z.array(z.string()),
});

const MyComponent = () => {
  const form = useForm<z.infer<typeof mySchema>>({
    resolver: zodResolver(mySchema),
  });

  const onSubmit = async (formValues: z.infer<typeof mySchema>) => {
    // ...
  };

  return (
    <>
      <FormField
        control={form.control}
        name="Name"
        render={({ field }) => (
          <Input {...field} label="Name" className="mb-24" />
        )}
      />
      <TagsInput
        label="Tags"
        selectedTags={selectedTags}
        onAddTag={onAddTag}
        onRemoveTag={onRemoveTag}
      />
      <Form {...form}>
        <form onSubmit={form.handleSubmit(onSubmit)}>
          <Button type="submit">Save</Button>
        </form>
      </Form>
    </>
  );
};

[dennyak47]

In my case, i want to use the "click enter to submit" behavior, but the form value is old value, not the latest value updated by input event of input element. So i do this.

      onKeyDown={(e) => {
        if (e.key === 'Enter') {
          e.preventDefault();
          if (submitButtonRef.current) {
            submitButtonRef.current.focus();
            submitButtonRef.current.click();
          }
        }
      }}

it works for me