Unfocusing of input

[BayCo]

Basic implementation of component is not working, input is unfocusing immediately! Please help, its so urgent!

[eric-dao37]

Hi @BayCo Can you give us more details about your issue?

[geraldcells18]

Hi, I really love using this component. However, when setting the autoFocusOnLoad to true the keyboard is not showing but focusing only on the first OTP Code.

[BayCo]

@ericdao-ttt i tried to implement on ios app, when i click on first input, it immediately unfocusing that input

[sujatha2016]

Has anybody found a solution to this ? am still experiencing the same on iOS. "react-native": "0.62.2", "@twotalltotems/react-native-otp-input": "1.3.5" is the version am using...

[z3r0c00l-2k]

This issue also happened for me too. I can't type anything input field

[sujatha2016]

I just noticed the input view work fine on my login page where as it totally crazy within my bottom tabs. Is it so for everyone else ? "react-navigation": "^4.3.8", "react-navigation-drawer": "^2.4.12", "react-navigation-stack": "^2.3.13", "react-navigation-tabs": "^2.8.12", the above are navigation related libs am using here

I tried this keyboardHidesTabBar: false, in the bottom tab navigation configuration and the keyboard jerking issues seems gone. Tested it only on a simulator not on device. am a bit concerned as if it would lead to anything else ...

[uraniumreza]

Any update/fix here? Facing the same issue on iOS, working fine for android though.

    "@react-native-community/clipboard": "^1.5.1",
    "@twotalltotems/react-native-otp-input": "^1.3.11",
    "react-native": "0.63.4",

[akhilumapathe]

Same as above..any update?

[fpena]

@BayCo please provide a working an code example and your expectation of what it should do.

[ghost]

@fpena I think this is obviously: To Reproduce:

<OTPInputView
    autoFocusOnLoad //or maybe autoFocusOnLoad={true}
    pinCount={4}
    onCodeChanged={this.__inputRegisterCode.bind(this)}
    secureTextEntry={true}
  />

Expected behavior autoFocusOnLoad - focuses on load

[ghost]

I found fix for my issue on all platforms

_/nodemodules/@twotalltotems/react-native-otp-input/index.js

componentDidMount() {
        this.copyCodeFromClipBoardOnAndroid();
        setTimeout(()=>{
            this.bringUpKeyBoardIfNeeded();
        },0)
    }

componentWillUnmount() {
         if (this._timer) {
             clearInterval(this._timer)
         }
     }

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

[bjornlll]

I'm also having the same issue. @ericdao-ttt were you able to reproduce?

[BayCo]

@ericdao-ttt, the problem occurs in ios emulators, when not using keyboard on emulator the input is not focusing even if you click on it, and that's confusing! Similar to #114

[AshishSuhane]

I am also facing the same issue with the iOS emulator and able to resolve it by enabling the simulator software keyboard. Enable simulator keyboard by clicking on I/O > keyboard > toggle software keyboard.

[keshav263]

Thank you @wearedusa , that works!

[Dhruvagwal]

Simply add setTimeout(() => this.bringUpKeyBoardIfNeeded(), 250); to /node_modules/@twotalltotems/react-native-otp-input/index.js (line-156)

[husna2540]

I found fix for my issue on all platforms

_/nodemodules/@twotalltotems/react-native-otp-input/index.js

componentDidMount() {
        this.copyCodeFromClipBoardOnAndroid();
        setTimeout(()=>{
            this.bringUpKeyBoardIfNeeded();
        },0)
    }

componentWillUnmount() {
         if (this._timer) {
             clearInterval(this._timer)
         }
     }

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

this work for me, thank

[sandeepg1220]

Still facing the same issue. The above solution also not working for me. Please help me any alternative solution.

[Prasad-03]

@ericdao-ttt, the problem occurs in ios emulators, when not using keyboard on emulator the input is not focusing even if you click on it, and that's confusing! Similar to #114

144 has answer of this question

[timothyerwin]

this is actually covered in one of the closed tickets...you need to call Keyboard.dismiss() before showing the otp screen.

[RafikMk]

For me, the solution was not resolved when modifying the node_modules/@twotalltotems/react-native-otp-input/index.js file. However, it works when I go to I/O -> Keyboard -> Toggle Software Keyboard.

[logboi1]

@RafikMk cheers