Last field input enter key submit form issue

[mairoo]

Hello,

I made a page with react-hook-form and yup. The page form (mode: onBlur) has only two fields, email and password like this:

[ email ] [ password ] [ submit ]

scenario 1 (OK)

• click email field
• type email
• tab keystroke
• type password
• tab keystroke
• enter

scenario 2 (OK)

• click email field
• type email
• click password field
• type password
• click submit button

However, the next scenario 3 is not working as I expected.

• click email field
• type email
• tab keystroke
• type password
• enter keystroke still focused in password field

When I enter in the password field, it validates my input password. My form is stuck in SubmitErrorHandler even if I put enter again and again. It just works if "click the submit button" although I've got an error.

How can I make the last field can accept "enter" key and submit form after validation?

import React, { useEffect } from 'react';
import { SubmitErrorHandler, SubmitHandler, useForm } from 'react-hook-form';
import * as yup from 'yup';
import { yupResolver } from '@hookform/resolvers/yup';
import { useNavigate } from 'react-router-dom';
import { useSignInMutation } from '../../store/services/authApi';
import { useAppSelector, useQueryMutationError } from '../../hooks/rtk-hooks';
import { RootState } from '../../store';

interface SignInForm {
  email: string;
  password: string;
}

const schema = yup
  .object({
    email: yup
      .string()
      .email()
      .required(),
    password: yup
      .string()
      .min(5)
      .required(),
  })
  .required();

const SignIn = () => {
  const { accessToken } = useAppSelector((state: RootState) => state.auth);

  const [signIn, { isLoading, isError, error, isSuccess }] =
    useSignInMutation();

  const navigate = useNavigate();

  const {
    register,
    handleSubmit,
    formState: { errors, isSubmitSuccessful },
    clearErrors,
    reset,
  } = useForm<SignInForm>({
    mode: 'onBlur',
    resolver: yupResolver(schema),
  });

  useEffect(() => {
    if (accessToken) {
      navigate('/');
    }

    if (isSuccess) {
      navigate('/');
    }

    useQueryMutationError(isError, error);
  }, [isLoading]);

  useEffect(() => {
    if (isSubmitSuccessful) {
      reset();
    }
  }, [isSubmitSuccessful]);

  const onValid: SubmitHandler<SignInForm> = (data, _) => {
    signIn({ email: data.email, password: data.password }); // call RTK query mutation
  };

  const onInvalid: SubmitErrorHandler<SignInForm> = (errors, event) => {
    console.log('why?', errors, event);
  };

  return (
    <form onSubmit={handleSubmit(onValid, onInvalid)}>
      <input
        type="text"
        placeholder="email"
        className="border"
        {...register('email')}
        onChange={() => {
          if (errors.email) {
            clearErrors('email');
          }
        }}
      />
      {errors.email && <span>{errors.email.message}</span>}
      <input
        type="password"
        placeholder="password"
        className="border"
        {...register('password')}
        onChange={() => {
          if (errors.password) {
            clearErrors('password');
          }
        }}
        onKeyUp={(event) => {
          console.log(event.key === 'Enter');
        }}
      />
      {errors.password && <span>{errors.password.message}</span>}
      <button type="submit" className="border" disabled={isLoading}>Sign in</button>
    </form>
  );
};

export default SignIn;

[mairoo]

Hi,

Fortunately, I found the reason why my input was neglected.

onChange handler was overridden, but I did not call super method.

I wanted to clear errors if a user touches or clicks the fields, and now it works with the following codes:

  const {
    register,
    handleSubmit,
    formState: { errors, isSubmitSuccessful },
    clearErrors,
    reset,
  } = useForm<SignInForm>({
    mode: 'onBlur',
    defaultValues: {
      email: '',
      password: '',
    },
    resolver: yupResolver(schema),
  });

... 

  const email = register('email', { required: true });

...

  <input
        type="password"
        placeholder="password"
        className="border"
        {...password}
        onChange={(e) => {
          password.onChange(e).then((_) => {
            if (errors.password) {
              clearErrors('password');
            }
          });
        }}
      />

[mairoo]

https://github.com/react-hook-form/react-hook-form/releases/tag/v7.16.0

As of 7.16.0, onChange event handler has to be overridden like this:

    <input
        type="password"
        placeholder="password"
        className="border"
        {...register('password', {
          required: true,
          onChange: (e) => {
            if (errors.password) {
              clearErrors('password');
            }
          },
        })}
      />