Open lavi-moolchandani opened 4 years ago
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);
}
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
});
}
};
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}
...
/>
}
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}
Solution:
const OTPContainer = () => { const otpRef = useRef(null);
useEffect(() => { setTimeout(() => otpRef.current.focusField(0), 250); }, []);
return <OTPInputView ref={otpRef} autoFocusOnLoad={false} ... /> }
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} />
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):