Detect whether the value is valid

[idrakimuhamad]

Right now, there're onFulfill method that will be triggered when the input has been fulfilled. Currently, I use that chance to update my state with the returned code and marked the input as valid. However, when user delete/backspace/removing characters, nothing was trigger and there're no ways for me to get hold the value now to determine that it is no longer valid. So that valid mark on the input still as valid while it isn't.

For example, my validity rule is simply I need it to be 4 characters. onFulfill will trigger when user typed in those 4 characters. My state updated and my UI make the input border to be green. That's good. Now, the user go on and erase the last input leaving it with only 3 characters. My input border still maintain as green, because I got no way to update my state.

How can I achieve this?

[mluedke2]

What I did to handle this was to create my own fork. On this fork:

1 - ConfirmationCodeInput now accepts a function prop onCodeChange 2 - In the three places in ConfirmationCodeInput that setState updates codeArr, I then call this.props.onCodeChange(newCodeArr).

Then you can use that callback (will probably need to use join('') on the codeArr) to do any higher-level logic.

[Foskas]

Hi @mluedke2 can you please share your code ? Thanks