Need access to an "onFocus" or "onBlur" prop

[fegaeze]

Describe the bug I'm trying to control the input state based on if there's an error, or if the field is focused after an error etc... These input states include highlight styles, error messages as well as a "countdown message". With all the other inputs across the app, I'm using Formik, and the onFocus/onBlur prop to control this. This default behaviour wasn't working out as expected with this component and so I discovered that this component does not have an onFocus or onBlur prop. This means that I cannot pass a focus/blur handler to the input.

Expected behaviour I expect that on focus or on blur, the OTP-input is able to run my handler functions.

Screenshots

In this first image, the user is just about to input the top for the first time. Everything works fine..

In this second image, the user has gotten back an error from the server due to invalid OTP. And then tries to enter the correct code. The error styles don't clear up even though the user is focused and I have a focus handler that clears the error state.

Smartphone (please complete the following information):

• Device: iPhone 11 (Simulator)
• OS: iOS14.4
• Browser: N/A
• Version [e.g. 22]

[Harkindey]

Hi @fegaeze , i discovered i need this feature too, would advice we build it out and make a PR to the module. But instead of giving onBlur and onFocus abilities. What we can do is pass down a prop called filledCodeInputFieldStyle. With this we check if a value is filled at a particular input or is empty. then add the style to the inputs which are filled. I would fork this repo out now and try that out and send it your way to test.

[fegaeze]

Hello :)

Can I know the why behind adding the filledCodeInputFieldStyle prop? I'm not sure that solves this use case.

[Harkindey]

so this is my use case, which onBlur and onFocus would have done perfectly,

i need to style the input after the user have filled in values. its different from yours actually now that i'm looking at it.

i think a way to solve yours would be, track with state when there is failure due to invalid OTP then update the codeInputFieldStyle or codeInputHighlightStyle.

[fegaeze]

Yes, it is different. But I think that the onBlur and onFocus prop idea will work for both use case. The only difference is that you’re targeting individual fields, but I need to be able to target overall.

So what’s the next step? Are you going ahead with your implementation?

On Sun, 21 Mar 2021 at 08:01, Emmanuel AKINDE @.***> wrote:

so this is my use case, which onBlur and onFocus would have done perfectly,

[image: Screenshot 2021-03-21 at 07 55 33] https://user-images.githubusercontent.com/14913673/111896569-e45cc580-8a1a-11eb-99c1-c4d2a18611f9.png

i need to style the input after the user have filled in values. its different from yours actually now that i'm looking at it.

i think a way to solve yours would be, track with state when there is failure due to invalid OTP then update the codeInputFieldStyle or codeInputHighlightStyle.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/tttstudios/react-native-otp-input/issues/123#issuecomment-803523164, or unsubscribe https://github.com/notifications/unsubscribe-auth/AFQKXF3AJ6GXM4RDVIHG6YTTEWKTZANCNFSM4ZGMIRLA .

[Harkindey]

@fegaeze i just checked commits, if this has been done, and it has, but the PR was reverted i don't know the back story to that.

see https://github.com/tttstudios/react-native-otp-input/commit/f4da4a67078183423a0d0642d198058f4840376c

i have been able to achieve my use case by adding filledCodeInputFieldStyle to a local copy of the module,

But i'm certain that,

i think a way to solve yours would be, track with state when there is failure due to invalid OTP then update the codeInputFieldStyle or codeInputHighlightStyle.

can solve your problem. i can see mySelf validating this inputs soon, and the method i just specified above is how i'll do it. if you need help adding more context to the solution i mentioned i can do that.

So i wont be moving on with that implementation, you can also check that commit and see how that can help you.

[fegaeze]

Alright! Thanks. I'm already tracking failure and updating styles if there's an invalid OTP. What I'm trying to do is to remove error styles on focus. I'll follow up with the commit that you shared.

[Harkindey]

Now i see the need. :sweat_smile:

So just thinking about it out of the top of my head another solution for that would be.

use onCodeChanged of the module, every-time the code.length === 1 remove error styles.

this doesn't change styles onFocus actually like we would prefer it, but styles will change onBlur or when user starts typing.

[fegaeze]

Thanks. Will try this out

[jamesmcn1]

+1 on the need for onFocus - use case would be to clear the code displayed onFocus

[RenanNeitzel]

+1 on the need for onFocus and onBlur. These props are basic in a form field context where there will be a possibility of validation before submitting the form