focusInput(0) not working after render

[hrithik73]

What I am trying to do:- I want to click on the label to get focus on the first input field

How I am Doing? I am using useRef and accesing focusInput() function with arguement 0

Expected Behavior:- It should focus on the first input Current Behavior:- 0th Input does not get the focus after rendering but after any changes in any input It works 1,2,3 inputs works fine i want the first one to get focused

• Steps to reproduce the issue: https://codesandbox.io/s/react-otp-input-demo-v2-forked-ng3l1s?file=/src/App.js

• Relevant error messages and/or screenshots:

Is there any other way to achieve this? Thanks in advance

[harishydav]

@hrithik73 It seems to be working just fine.

I came here looking for finding a way to find a way to programmatically focus. Stumbled across your Codesandbox and realized the code sandbox is actually a good example to learn how to focusInput.

So I guess you can close the issue yourself. Since you anyways invested effort in creating this you can probably contribute that as an example of focusInput

[hrithik73]

@harishydav I think on the first render it doesn't work as expected, The expected behavior is to focus on the first input when you click on the label but after some focusing on any input field if you click on the label it works fine as expected

[harishydav]

@hrithik73 have you tried shouldAutoFocus this will focus the opt-boxes on first render

[hrithik73]

Yeah , But i need auto focus when clicked on label

[vivek0046]

any updates on this ? i am also facing the same issue

[hrithik73]

Sadly No :( , Our requirement has changed and we dropped the project

[Amethystafyy282]

any updates on this ? i am also facing the same issue

I've a workaround

            OTPRef.current.focusInput(1);
            setTimeout(() => OTPRef.current.focusInput(0), 1);

[hrithik73]

any updates on this ? i am also facing the same issue

I've a workaround

            OTPRef.current.focusInput(1);
            setTimeout(() => OTPRef.current.focusInput(0), 1);

It's a good workaround but the UX will not be good as it shows the pointer moving from 2nd position to 1st in real-time.

[ritikbanger]

The feature is available in: https://www.npmjs.com/package/react18-input-otp