CODEWITHSUNDEEP
reactjs
Daar44
Daar44

Reputation: 449

The react-hook-form library and React Ref

Having such a simple react-hook-form example form:

import React from 'react';
import { useForm } from 'react-hook-form';

export default function ReactForm() {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm();

  const onSubmit = (data) => console.log(data);

  let textInput = null;

  function handleClick() {
    textInput.focus();
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)}>

      <label htmlFor="firstName">First Name:</label>
      <input 
        id="firstName"
        ref={(input) => { 
          console.log("firstName ref...")
          textInput = input
          }
        }
        {...register('firstName')} />
      <br/>

      <label htmlFor="lastName">Last Name:</label>
      <input id="lastName" { ...register('lastName', { required: true })} /><br/>

      <label htmlFor="age">Age:</label>
      <input id="age" {...register('age', { pattern: /\d+/ })} />     

      <input
        type="button"
        value="Focus the text input"
        onClick={handleClick}
      /><br/>
      
      <input type="submit" />

      {errors.firstName && <p>First name is required!</p>}
      {errors.lastName && <p>Last name is required!</p>}      
      {errors.age && <p>Please enter number for age!</p>}

    </form>
  );
}

I'm getting :

Cannot read properties of null (reading 'focus')

error. The reason for this is that the ref seems not to be called at all (NOT giving the the firstName ref... in the console). Why doesn't the ref NOT being called & working!?

P.S.

I'he rewritten the above WITHOUT using the react-hook-form and the ref do work as expected so the problem lies somewhere in the react-hook-form library!

Upvotes: 0

Views: 1633

Answers (1)

Robert Hodgen
Robert Hodgen

Reputation: 96

Your ref prop is being overridden by react-hook-form's register. The result of register includes it's own ref property that you're spreading onto the input. The docs indicate this is used for focusing the field on validation errors.

Your exception occurs in your click handler because your ref callback was never executed (and textInput is still null).

Try swapping the order so you override the ref provided by register('firstName') like so:

<input 
  id="firstName"
  {...register('firstName')} // spread result of register including ref prop
  ref={(input) => { // override ref prop
    console.log("firstName ref...")
    textInput = input
  }}
/>

Upvotes: 2

Related Questions