TypeError: get(...)._f.ref.focus is not a function in ReactJs

Dung Do Tien Mar 14 2022 26

I'm working with Reactjs. In an element registered by React-Hook-Form, I can't use ref to access the element.

This is my code:

<textarea
  name="message"
  className="flex-1 p-0 w-full bg-transparent border-0 text-base placeholder-gray-600 focus:ring-0 custom-scrollbar"
  onKeyDown={handleEnterKeyboard}
  {...register('message')}
  ref={inputChatRef}
 />

When I run code, it appears the error like this:

TypeError: get(...)._f.ref.focus is not a function

Please help me, Thank you for any solution.

Have 1 answer(s) found.
  • M

    Máté Kovács Mar 14 2022

    You can fix this error by change

     ref={inputChatRef}

    To

    ref={e => {
             register('message').ref(e);
             inputChatRef.current = e;
         }}

    Below is the full code for you:

    <textarea
         name="message"
         className="flex-1 p-0 w-full bg-transparent border-0 text-base placeholder-gray-600 focus:ring-0 custom-scrollbar"
         onKeyDown={handleEnterKeyboard}
         {...register('message')}     
         ref={e => {
             register('message').ref(e);
             inputChatRef.current = e;
         }}
    />

    This solution is mentioned in the official document of React-Hook-Form. You can access https://react-hook-form.com/faqs#Howtosharerefusage

    Thanks!

Leave An Answer
* NOTE: You need Login before leave an answer

* Type maximum 2000 characters.

* All comments have to wait approved before display.

* Please polite comment and respect questions and answers of others.

Popular Tips

X Close