React Forms focus next field on enter

Marinko — Wed, 16 Jun 2021 14:36:50 +0000

Hi everyone,
This is my first post on dev.to
I started to learn react few months ago and i'm starting to get comfortable with it.

On my project I had an idea to use enter key to go to the next field in the form that is focusable (mimic tab functionality). I didn't want to use useRef on each field and manually adjust focus because it would be cumbersome.

Hook is called "useFocusOnEnter".

const useFocusOnEnter = (formRef) => {
    const onEnterKey = (event) => {

        if (event && event.keyCode && event.keyCode === 13 && event.target && event.target.form) {
            const form = event.target.form;
            const index = Array.prototype.indexOf.call(form, event.target);
            for (let i = index + 1; i < formRef.current.length; i++) {
                if (formRef.current[i].tabIndex === -1) {
                    continue
                }
                formRef.current[i].focus();
                if (document.activeElement === formRef.current[i]) {
                    break;
                }
            }
        }
    }

    return {onEnterKey};
}

export default useFocusOnEnter;

And to see it in action:

const FormComponent = ({stavka}) => {

    const form = useRef();
    const {onEnterKey} = useFocusOnEnter(form);

    const handleSubmit = (e) => {
        //handle submit
    }

    return (
        <form ref={form} onKeyUp={event => onEnterKey(event)}>
            <input autoFocus/>
            <input />
            <input />
            <input />
            <input />
            <button type="button" onClick={handleSubmit}>Save</button>
        </form>
    );
}
export default FormComponent;

Thank you for reading

DEV Community: Marinko

React Forms focus next field on enter