React-native: Android: Calling TextInput instance's focus() after keyboard is closed via back button/submit doesn't bring up keyboard

[nar213]

• [x] I have reviewed the documentation
• [x] I have searched existing issues
• [x] I am using the latest React Native version

Issue was closed and not fixed #11979

Environment

Environment:
OS: macOS High Sierra 10.13.4
Node: 9.9.0
Yarn: 1.6.0
npm: 5.6.0
Watchman: 4.9.0
Xcode: Xcode 9.3.1 Build version 9E501
Android Studio: 3.0 AI-171.4443003

Packages: (wanted => installed)
react: 16.3.2 => 16.3.2
react-native: 0.55.4 => 0.55.4

Steps to Reproduce

Calling focus() on a TextInput instance after keyboard is closed via Android back or submit/enter soft key doesn't bring keyboard back up.

Obviously, you can just tap on the TextInput itself to bring the keyboard back up, but the expected behaviour of calling focus() should still apply. The problem is a pain when the TextInput is hidden and their is a different representation of the TextInput's state, such as a custom pin code entry form.

Reproduction
Focus

Expected Behavior

Tap TouchableOpacity to focus. Press back to dismiss keyboard. Tap TouchableOpacity. Keyboard opens

Actual Behavior

Tap TouchableOpacity to focus. Press back to dismiss keyboard. Tap TouchableOpacity. Keyboard doesn't open

[anhtukhtn]

Do you solve the problem?
I work around by:

      this.textInput.blur();

      setTimeout(() => {
        this.textInput.focus();
      }, 100);

[nar213]

@anhtukhtn that approach works sporadically, perhaps every tenth time. My workaround was to put my hidden TextInput behind my custom TextInputDisplay and allow clicks to pass through to the TextInput. It's not a great solution, but it works for my specific use case.

[react-native-bot]

Please run react-native info and update your issue.

[climam]

I also face this issue. It seems to happen only when there is a change of type of keyboard between two TextInput. @anhtukhtn, your approach always work for me. The only thing that must be done if you want the autofocus, is to implement this in your componentDidMount:

componentDidMount() {
      setTimeout(() => {
        this.workaroundFocus();
      }, 100);
}

workaroundFocus() {
      this.textInput.blur();

      setTimeout(() => {
        this.textInput.focus();
      }, 100);
}

render() {
return <TouchableOpacity onPress={() => this.workaroundFocus()}>;
}

This is pretty ugly but it does the job.

[stale[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as "For Discussion" or "Good first issue" and I will leave it open. Thank you for your contributions.

[stale[bot]]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.