Cannot read properties of undefined (reading 'focus') on calling focus on useRef current object

Question

Here I have to call useRef and have the focus method to be called on Ref object. Below is the Input.tsx component.

import React, { useRef, useState } from "react";

const Input = (props: any) => {

const [text, setText] = useState<string>('');

const inputRef = useRef<any>();

const onChangeHandler = (e) => {
  setText(e.target.value)
};

const submitHandler = (event: React.FormEvent) => {
event.preventDefault();
if (!text) {
    inputRef.current.focus();
  }

};  

return (
    <div>
<form onSubmit={submitHandler}>
  <label htmlFor="label">label</label>
  <input
    ref={inputRef}
    value={text}
    type="text"
    id="email"
    onChange={onChangeHandler}
    />
<button type="submit">Submit</button>
</form>
</div>


);

};

export default Input;

If I don't define the useRef type to be 'any' I'm getting compile error. Where as defining it 'any' I'm getting runtime error of cannot read properties of undefined (reading 'focus'). I think I'm not initializing any value on useRef that's why I'm getting this error. But I also know I can't assign string, number or boolean value and call focus() there. How can I fix this issue. I'm using typescript by the way.

@SurjeetBhadauriya soz forgot to mention I'm using useImperativeHandle hook so then ref can be used in other components. so yes when activate is called. Edited the code that way — joekevinrayan96, Dec 10 '21 at 07:53
please provide reproducible example. Does `inputRef` used with `` ? — captain-yossarian from Ukraine, Dec 10 '21 at 07:59
[This](https://stackoverflow.com/questions/66963289/useref-typescript-not-assignable-to-type-legacyrefhtmldivelement/66963712#66963712) answer might be helpful. Please keep in mind that `inputRef.current` is `InputHTMLElement | undefined`, it means that your code might cause runtime error because `current` might be `undefined`. Before calling `focus` you need to assure typescript that it has correct reference — captain-yossarian from Ukraine, Dec 10 '21 at 08:01
I'd willing to bet that you should use `const inputRef = useRef(null)` instead of `const inputRef = useRef()` — captain-yossarian from Ukraine, Dec 10 '21 at 08:03
@captain-yossarian soz it didn't work. Infact I'm getting error at inputRef.current. Have edited the it has unwanted code base too. But having issues only with useRef and Focus. — joekevinrayan96, Dec 10 '21 at 08:29
@kevinTHEprogrammer please share minimum reproducible example. Please remove unrelated code from your example — captain-yossarian from Ukraine, Dec 10 '21 at 08:32

score 1 · Accepted Answer · answered Dec 11 '21 at 06:06

I found the answer to my own question. The type of useRef.current for a text input field usually would be <HTMLInputElement | null> it cannot be undefined. Therefore this is how the code should be.

import React, { useRef, useState } from "react";

const Input = (props: any) => {

const [text, setText] = useState<string>('');

const inputRef = useRef<HTMLInputElement>(null); //made a change here

const onChangeHandler = (e) => {
  setText(e.target.value)
};

const submitHandler = (event: React.FormEvent) => {
event.preventDefault();
if (!text) {
    inputRef.current!.focus(); //made a change here
  }

};  

return (
    <div>
<form onSubmit={submitHandler}>
  <label htmlFor="label">label</label>
  <input
    ref={inputRef}
    value={text}
    type="text"
    id="email"
    onChange={onChangeHandler}
    />
<button type="submit">Submit</button>
</form>
</div>


);

};

export default Input;

Thanks to one of the comments below my question.

Cannot read properties of undefined (reading 'focus') on calling focus on useRef current object

1 Answers1