Controlled Component about react-pin-input HOT 5 OPEN

Or alternatively, you could include your own useEffect hook to detect changes to initial value, which would probably be more optimal.

from react-pin-input.

For anyone else that needs to do something like this, after reviewing the source code, this is the solution I came up with:

    React.useEffect(() => {
        if(ref && ref?.current){
            const valueArr = (value || '').toString().split('');

            // No changes necessary, short circuit.
            if(isEqual(valueArr, ref.current.values))
                return; 

            // Iterate over each digit updating from valueArray item
            for(let i = 0; i < ref.current.elements.length; i++){
                ref.current.elements[i].update(valueArr[i] || '', true);
            }
        }
    },[value])

Not sure if its what the maintainer would have recommended, but it works for me.

from react-pin-input.

@aintHuman Thank you for the suggestion and solution. Will look into this.

from react-pin-input.

Also, can you expose the onFocus / onBlur callbacks as arguments in the constructor (which get passed down to each PinItem, and called after your own internal usage), so that I can detect from my parent component, when an individual field has been entered / left.

I need this for a touchpad where there is no keyboard and therefore need to have a up/down button to step the value up / down, or make a keypad to enter the values by touch.

from react-pin-input.

@aintHuman Sure. Will consider.

from react-pin-input.