AutoFocus not working for android

[lavi-moolchandani]

Describe the bug I am using version 1.3.5 and testing the app using Samsung Galaxy S8 and IPhone 11 Max, but for all the IOS devices I tested and it works fine whereAs for android it is not working. Keyboard doesn't comes up even after calling the function focusField().

To Reproduce I am calling the functional component as: <OTPInputView autoFocusOnLoad={true} codeInputFieldStyle={[ styles.codeInputField, { color: props.hasError ? theme.appRed : theme.appText, borderColor: props.hasError ? theme.appRed : theme.appText, }, ]} onCodeFilled={(code) => props.onFilled(code)} pinCount={6} ref={inputRef} />

Expected behavior this should work same for both the devices but it doesn't open keyboard in android

Smartphone (please complete the following information):

• Samsung Galaxy S8
• Android 7.0 Nougat
• Version 1.3.5

[loveaurellu]

For me, something is taking the focus shortly after componentDidMount. Wrapping the call to this.bringUpKeyBoardIfNeeded() in a setTimeout in componentDidMount solves it for me, but that's not really a solution...

componentDidMount() {
    this.copyCodeFromClipBoardOnAndroid();
    setTimeout(() => {
        this.bringUpKeyBoardIfNeeded();
    }, 50);
    this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this.handleKeyboardDidHide);
}

[StIch0]

try

componentDidMount() {
        this.copyCodeFromClipBoardOnAndroid();
        setTimeout(()=>{
            this.bringUpKeyBoardIfNeeded();
        },0)
        this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this.handleKeyboardDidHide);
    }

and

this.focusField = (index) => {
            if (index < this.fields.length && this.fields[index]) {
                this.fields[index].focus();
                this.setState({
                    selectedIndex: index
                });
            }
        };

[nvtc98]

Base on the solution above, here is how to fix using hook:

const OTPContainer = () => {
const otpRef = useRef(null);

useEffect(() => {
  otpRef.current.focusField(0);
}, []);

return <OTPInputView
        ref={otpRef}
        ...
      />
}

[shahanshah87]

Base on the solution above, here is how to fix using hook:

const OTPContainer = () => {
const otpRef = useRef(null);

useEffect(() => {
  otpRef.current.focusField(0);
}, []);

return <OTPInputView
        ref={otpRef}
        ...
      />
}

If still facing issue then add setTimeout in useEffect and make autoFocusOnLoad={false}

[Villa2311]

Solution:

const OTPContainer = () => { const otpRef = useRef(null);

useEffect(() => { setTimeout(() => otpRef.current.focusField(0), 250); }, []);

return <OTPInputView ref={otpRef} autoFocusOnLoad={false} ... /> }

[AyazQadri]

Thanks all, below solution worked for me as well.

const otpRef = useRef(null);

useEffect(() => { setTimeout(() => otpRef.current.focusField(0), 250); }, []);

return <OTPInputView ref={otpRef} autoFocusOnLoad={false} />