Set focus to IonInput

Ionic Framework Ionic React
1

First of all, Hello everyone and thank yout for investing a little of your time in this post. All I want is to set focus on an input when page just rendered. I did this on sandbox (https://codesandbox.io/s/vigorous-feather-dwipf). But when I use IonInput component it doesn’t work. I read about setFocus methos but if a search information about it, is on Angular.

If anyone could help me, i would be very grateful.

2

theres a method called setFocus you can use.
3

But, can you send me a simple code where u use it?

4

I know that there is a setFocus method but i don’t know how to use it.

5

Hello @srterry,

Here is the reference

You can do something like this:

export const FormPage = () => {
    const inputRef = useRef<any>(null);

    useEffect(() => {
        setTimeout(() => inputRef.current.setFocus(), 100);
    })

    return <div>
        <h6>Name</h6>
        <IonItem>
            <IonInput ref={(ref) => inputRef.current = ref}> </IonInput>
        </IonItem>
    </div>
}
6

Thank you very much. That is what I was looking for.

1 Like