Want to implement with click of "Enter" key react-form to trigger submission using react-form hook

Question

If I try to call handleSubmit(Submit)() function of react-form-hook inside a custom hook it is being called but do fails to take input value and throws validation error.

My attempt-

import React, { useEffect, useRef, useState } from "react";
import { useForm } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import * as yup from "yup";
import CustomInput from "../../CustomComponents/FormInputs";
import { useKeyDown } from "../../../hooks/useKeyDown";


const VerifyEmail = () => {

    const dispatch = useDispatch();


    const schema = yup.object().shape({
        email: yup.string().required(t("email_required")).email(t("invalid_email")),
    });
    const [validEmail, setValidEmail] = useState(false);
  
    const {
        register,
        handleSubmit,
        formState: { errors },
        setFocus,
        getValues,
    } = useForm({
        resolver: yupResolver(schema),
      
    });

// custom hook

    useKeyDown(() => {
        handleSubmit(onSubmit)();
    }, ["Enter"]);
 

    const onSubmit = async (data) => {
        try {
            console.log(data);
           
        } catch (error) {
            // Handle specific errors and set form errors using setError
            console.log("something went wrong");
        }
    };

  

    return (
        <>
            <form className="flex flex-col" onSubmit={handleSubmit(onSubmit)}>
          
                <input
                    name="email"
                    label="email"
                    {...register(name)}
                    error={errors.email}
                    autoComplete="off"
                    placeholder="email"
                    type="text"
                    onChange={handleChange}
                    maxLength='50'
     
                />
                 


                <div className=" mt-20">
                    <button type="submit">"Submit"</button>
                </div>
            </form>
           
        </>
    );
};

export default VerifyEmail;


//====================================

CUSTOM HOOK

import { useEffect } from 'react';

export const useKeyDown = (callback, keys) => {
    const onKeyDown = (event) => {
        const wasAnyKeyPressed = keys.some((key) => event.key === key);
        if (wasAnyKeyPressed) {
            // event.preventDefault();
            callback();
        }
    };
    useEffect(() => {
        document.addEventListener('keydown', onKeyDown);
        return () => {
            document.removeEventListener('keydown', onKeyDown);
        };
    }, [onKeyDown]);
};

I want to achieve that with press of "Enter" key react form triggers submission and validation. Also if anyone can help me to how we can implement with click of tab button it navigates to different input fields of react-form?

Salman-13 · Answer 1 · 2023-08-02T13:09:57.757

Try like this:

useKeyDown((onSubmitCallback) => {
    handleSubmit(onSubmitCallback);
}, ["Enter"]);


const onSubmit = async (data) => {
    try {
        console.log(data);
       
    } catch (error) {
        // Handle specific errors and set form errors using setError
        console.log("something went wrong");
    }
};

And redo the custom hook like this:

export const useKeyDown = (callback, keys) => {
const onKeyDown = (event) => {
    const wasAnyKeyPressed = keys.some((key) => event.key === key);
    if (wasAnyKeyPressed) {
        // event.preventDefault();
        callback(keys(data));
    }
};
useEffect(() => {
    document.addEventListener('keydown', onKeyDown);
    return () => {
        document.removeEventListener('keydown', onKeyDown);
    };
}, [onKeyDown]);

};

Want to implement with click of "Enter" key react-form to trigger submission using react-form hook

1 Answers1