Unable to programmatically focus on TextInput using ref and trigger keyboard

Description

Hi, firstly thanks for all the work on the repo, it’s been great to use.

I’ve run into an issue trying to make the focus of the TextInput automatically proceed to the next one, if the user inserts a valid entry.

This is almost exactly like the following: https://stackoverflow.com/questions/49028339/change-the-focus-automatically-to-the-next-textinput-in-react-native

The specific issue I’m seeing is that while the TextInput appears to receive focus and fire the onFocus callback, the keyboard doesn’t appear and the TextInput can not be selected either using the arrow keys. I’m doing this by setting a ref on the TextInput I want to set focus on, and firing a ref.current.focus when the previous TextInput has text typed into it.

In the repo I’ve created, I’ve also implemented https://reactnative.dev/docs/direct-manipulation#setnativeprops-to-edit-textinput-value to show that the focus can be applied and the keyboard opened using an onPress event.

Any help would be much appreciated!

Version

react-native-tvos@0.68.2-5

Output of npx react-native info

System: OS: macOS 12.1 CPU: (8) x64 Apple M1 Pro Memory: 25.47 MB / 16.00 GB Shell: 5.8 - /bin/zsh Binaries: Node: 14.19.3 - ~/.nvm/versions/node/v14.19.3/bin/node Yarn: 1.22.18 - /opt/homebrew/bin/yarn npm: 6.14.17 - ~/.nvm/versions/node/v14.19.3/bin/npm Watchman: 2022.05.16.00 - /opt/homebrew/bin/watchman Managers: CocoaPods: 1.11.3 - /opt/homebrew/bin/pod SDKs: iOS SDK: Platforms: DriverKit 21.4, iOS 15.5, macOS 12.3, tvOS 15.4, watchOS 8.5 Android SDK: API Levels: 29, 30, 31, 32 Build Tools: 28.0.3, 29.0.3, 30.0.2, 30.0.3, 32.0.0, 32.1.0 System Images: android-32 | Google APIs ARM 64 v8a, android-Tiramisu | Google TV ARM 64 v8a Android NDK: 19.2.5345600 IDEs: Android Studio: 2020.3 AI-203.7717.56.2031.7935034 Xcode: 13.4/13F17a - /usr/bin/xcodebuild Languages: Java: 11.0.15 - /usr/bin/javac npmPackages: @react-native-community/cli: Not Found react: 17.0.2 => 17.0.2 react-native: Not Found react-native-macos: Not Found react-native-tvos: 0.68.2-5 npmGlobalPackages: react-native: Not Found

Steps to reproduce

https://user-images.githubusercontent.com/106078405/185592160-52a8fab7-f323-4c9b-af4b-5d6fa7ee629c.mov

Snack, code example, screenshot, or link to a repository

https://github.com/pkaneriendeavor/TestTVApp

[douglowder]

@nriccar I tried that and it did not work – however, even if I made the timeout work, I think your solution is actually better and less hacky.

[douglowder]

What @nriccar is doing looks like the right way to solve the issue on Apple TV.

The problem I’m seeing is that if you immediately try to call focus() on the second input, you have an issue where the view being focused is actually not in the native view hierarchy. I’m seeing Xcode console messages like this:

2022-08-23 14:03:41.745579-0700 TestTVApp-tvOS[23041:2757946] [UIFocus] Found invalid pending focus update request for environment <_UIKBCompatInputView: 0x145624f40> in focus system <UIFocusSystem: 0x6000014382c0>.
2022-08-23 14:03:42.251684-0700 TestTVApp-tvOS[23041:2757946] [Presentation] Attempt to present <UISystemInputViewController: 0x14606a600> on <UISystemInputViewController: 0x155831800> (from <UISystemInputViewController: 0x155831800>) whose view is not in the window hierarchy.