Enter key press to next input field (Tab behaviour)

[sanojsilva]

Hey is there a default way to enable the tab behaviour for enter key or do we have to implement this manually

[johnrom]

Hi @sanojsilva,

There is currently no way to implement this in Formik itself. You can attach an onKeyUp handler to all your inputs, and prevent event.preventDefault() when event.key === 'Enter'. You may have to use onKeyPress in React Native, if you're using it. On textareas, you should check to make sure event.shiftKey is pressed, because enter normally makes a newline in textareas, while shift+enter submits.

[sanojsilva]

Hey, Thank You for your Answer. I found a way from StackOverflow with slight modifications to achieve it by using the following code.

  React.useEffect(() => {
    document.addEventListener("keydown", function (event: any) {
      if (event.keyCode === 13 && event.target.nodeName === "INPUT") {
        var form = event.target.form;
        var index = Array.prototype.indexOf.call(form, event.target);
        form.elements[index + 2].focus();
        event.preventDefault();
      }
    });
  }, []);

[johnrom]

@sanojsilva it would be a bit more performant to implement this in React using <Form onKeyUp={yourCallback} />

If that's a bit too much for right now, you'll want to remove the event listener on dismount by returning a callback that removes the event listener, like this:

// by passing empty array at the end, this will always return the same function, compatible with removeEventListener
const keyDownHandler = React.useCallback((event: KeyboardEvent) => { /* your code */ }, []);

React.useEffect(() => {
  document.addEventListener("keydown", keyDownHandler);

  return () => document.removeEventListener("keydown", keyDownHandler);
}, []);

Otherwise, every time this component mounts another event listener will be added, meaning it will be triggered multiple times on keypress.

I'd also recommend using "keyup" because it's possible to press the enter key, click off the input, and release it without firing a form submit in HTML, in case you started hitting enter by mistake.

[sanojsilva]

@johnrom Hey thank you so much for the information 💯 . I totally forgot to remove the event listener on component unmount. I'll give this a try <Form onKeyUp={yourCallback} /> 👍

[filipeferreira-dev]

@johnrom @sanojsilva Thanks you so much! It`s helped me a lot!

[onyedikachi23]

The accepted answer only follows the structure of the author's form. index + 2 skips 2 fields on Enter key press (maybe because the next field isn't an input).

keyup instead of keydown as @johnrom suggested makes event.preventDefault() not being called immediately.

My solution would work:

• on any kind of form
• only for input fields
• form is submitted (or any other default action happens) when Enter key is pressed on the last input field.

Create the function:

const moveToNextInputFieldOnEnter = (event: KeyboardEvent) => {
	if (event.code === "Enter") {
		const currentInput = event.target as HTMLInputElement;
		if (currentInput.nodeName != "INPUT") return;

		const form = currentInput.form;
		if (!form) return;

		const formInputs = Array.from(form).filter(
			(element) => element.nodeName === "INPUT"
		) as HTMLInputElement[];

		const nextInputIndex = formInputs.indexOf(currentInput) + 1;
		if (nextInputIndex > formInputs.length) return;

		const nextInput = formInputs[nextInputIndex];

		nextInput.focus();
		event.preventDefault();
	}
};

Then add event listener in a useEffect:

// move to next input field on enter key press
	useEffect(() => {
		document.addEventListener("keydown", moveToNextInputFieldOnEnter);

		return () => {
			document.removeEventListener(
				"keydown",
				moveToNextInputFieldOnEnter
			);
		};
	}, []);