ref.current.focus() is not a function

Question

im trying to use a ref for focusing on the element when onBlur. I'm using react v.16.9.0 My code is this:

const handleKeyDown = (e, element, index) => {
  element.current.focus();
  event.preventDefault();
};

const pinDigitBuilder = () => {
  const arr = Array(...Array(TOTAL_PIN_DIGITS));
  return arr.map((x, i) => {
    const inputRef = useRef(null);
    console.log(inputRef);
    return (
      <Field
        key={`${PIN_DIGIT}${i + 1}`}
        id={`${PIN_DIGIT}${i + 1}`}
        name={`${PIN_DIGIT}${i + 1}`}
        ref={inputRef}
        component={InputTextField}
        className="text xxs2"
        classNameInvalid="text xxs2 error"
        type="text"
        divClassName="fieldWrap"
        maxLength={1}
        normalize={keepNumbersOnly}
        errorStyle={{ display: 'none' }}
        autoComplete="off"
        onBlur={(e) => { handleKeyDown(e, inputRef, i); }}
      />
    );
  });
};

When i click outside the field an error occured saying that element.current.focus();. I dont get it. I use useRef as explained with details in the docs and i dont know what im missing. Any ideas?

score 4 · Accepted Answer · answered Sep 21 '20 at 15:55

4

I'm assuming <Field /> is a Functional component. And inside <Field /> component there is a input element. If that is the case then you have to use forwardref to pass down ref to child. Here is the reference link

https://reactjs.org/docs/forwarding-refs.html.

answered Sep 21 '20 at 15:55

reachtokish

347
1
10

the weird thing is that if i console.log(element) inside the function is shows me current:{...lots of pros} – RamAlx Sep 21 '20 at 16:16
Yes that's the actual behavior of `ref` right? Ref gives you the whole reference of the element. – reachtokish Sep 21 '20 at 16:20
1

Could you pls create a sandbox and share? That will help me to deep dive into the issue – reachtokish Sep 21 '20 at 16:29
2

react is full of traps – user151496 Mar 04 '21 at 15:28

score 2 · Answer 2 · answered Nov 30 '20 at 14:33

I don't know if you found the answer but I had the same issue with a double problem.

I was using a class stateless component so no ref and this is why I am assuming you were getting the error (How can I attach to a stateless component's ref in React?)
In order to fix this issue you need add a tabIndex in order to set focus in a div (not input element) (Is it possible to focus on a <div> using JavaScript focus() function?)

ref.current.focus() is not a function

2 Answers2