Warning: Function components cannot be given refs. Did you mean to use React.forwardRef()

[binajmen]

Hi,

I'm trying to use RHF with Chakra UI, but I get a warning with a custom field.

Here is the component where useForm() is used:

export default function ExamEdit({ user, profile }: InferGetServerSidePropsType<typeof getServerSideProps>) {
  const router = useRouter();
  const { id } = router.query;
  const { data: exam } = useSWR([EXAM, id], fetchExamById);

  const { register, handleSubmit, formState: { errors, isSubmitting } } = useForm();
  const onSubmit = (data: any) => console.log(data);

  return (
    <AdminLayout user={user} profile={profile}>
      {exam ? (
        <form onSubmit={handleSubmit(onSubmit)} noValidate>

          {/* Does not raise a warning */}

          <FormControl id='name' isInvalid={errors["name"]} mb={5} isRequired>
            <FormLabel htmlFor='name'>Name</FormLabel>
            <Input type='text' {...register("name", { required: "This is required." })} />
            {!errors["name"] ? (
              <FormHelperText>
                Enter the name of the examination.
              </FormHelperText>
            ) : (
              <FormErrorMessage lineHeight="normal">{errors.name.message}</FormErrorMessage>
            )}
          </FormControl>

          {/* Does raise a warning.. */}

          <TextField
            label="Test"
            helperText="This is a test"
            errors={errors}
            {...register("test", { required: "This is required." })}
          />

          <Button type="submit" colorScheme="blue" isLoading={isSubmitting}>Save</Button>
        </form>
      ) : (
        <h1>Loading..</h1>
      )}
    </AdminLayout>
  )
}

Here is the TextField component.

import { FieldErrors, UseFormRegisterReturn } from 'react-hook-form';
import { FormControl, FormErrorMessage, FormHelperText, FormLabel, Input } from '@chakra-ui/react';

type TextFieldProps = UseFormRegisterReturn & {
  errors: FieldErrors,
  label: string,
  helperText: string,
}

export default function TextField({ label, helperText, errors, ...register }: TextFieldProps) {
  const { name, ...rest } = register;

  return (
    <FormControl id={name} isInvalid={errors[name]} mb={5} isRequired>
      <FormLabel htmlFor={name}>{label}</FormLabel>
      <Input type='text' name={name} {...rest} />
      {!errors[name] ? (
        <FormHelperText>{helperText}</FormHelperText>
      ) : (
        <FormErrorMessage lineHeight="normal">{errors[name].message}</FormErrorMessage>
      )}
    </FormControl>
  )
}

The first field "inlined" in the form does not raise a warning. The second field (TextField), an exact copy of the first, does raise a warning.

I can't figure out what I need to do regarding the warning and the mention of forwardRef:

next-dev.js?3515:32 Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

Check the render method of `ExamEdit`.
    at TextField (webpack-internal:///./components/form/TextField.tsx:71:24)
    at AdminLayout (webpack-internal:///./components/AdminLayout.tsx:124:22)
    at ExamEdit (webpack-internal:///./pages/admin/exams/[id]/edit.tsx:57:22)
    ...

Any help would be greatly appreciated 🙏

[binajmen]

I've landed on the following solution using Controller:

type Fields = {
  name: string,
  testing: string,
}

export default function Form() {
  const { register, handleSubmit, control, formState: { errors, isSubmitting } } = useForm<Fields>({
    defaultValues: {
      name: "Foo",
      testing: "Bar",
    }
  });

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

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

      <FormControl id='name' isInvalid={errors["name"] !== undefined} mb={5} isRequired>
        <FormLabel htmlFor='name'>Name</FormLabel>
        <Input type='text' {...register("name", { required: "This is required." })} />
        {!errors["name"] ? (
          <FormHelperText>
            Enter the name of the examination.
          </FormHelperText>
        ) : (
          <FormErrorMessage lineHeight="normal">{errors.name.message}</FormErrorMessage>
        )}
      </FormControl>

      <InputField
        control={control}
        name="testing"
        label="Testing"
        helperText="Text to help"
      />

      <Button type="submit" colorScheme="blue" isLoading={isSubmitting}>Save</Button>
    </form>
  )
}

import { Controller } from 'react-hook-form';
import { FormControl, FormErrorMessage, FormHelperText, FormLabel, Input } from '@chakra-ui/react';

type TextFieldProps = {
  control: any,
  name: string,
  label: string,
  helperText: string,
}

export default function InputField({ control, name, label, helperText }: TextFieldProps) {
  return (
    <Controller
      control={control}
      name={name}
      rules={{
        required: "This is required"
      }}
      render={({
        field,
        fieldState: { invalid, error },
      }) =>
        <FormControl id={name} isInvalid={invalid} mb={5} isRequired>
          <FormLabel htmlFor={name}>{label}</FormLabel>
          <Input type='text' {...field} />
          {!error ? (
            <FormHelperText>{helperText}</FormHelperText>
          ) : (
            <FormErrorMessage lineHeight="normal">{error.message}</FormErrorMessage>
          )}
        </FormControl>
      }
    />
  )
}

[dprcold]

there was the same problem, solved without useController, you need to wrap the chakra components in forwardRef

import React, {forwardRef } from 'react';
import { Input, InputProps  } from '@chakra-ui/react';


export const CustomInputField: React.FC<InputProps> = forwardRef(({ ...other  }, ref) => {
  const defaultFocusBorderColor = '#1890FF';
  const defaultVariant = 'outline';
  const defaultSize = 'md';
  return (
    <Input
      ref={ref}
      focusBorderColor={defaultFocusBorderColor}
      variant={defaultVariant}
      size={defaultSize}
      {...other}
    />
  );
})