[iOS] TextInput selection state lost on update render

[exoconnor]

• Review the documentation: https://facebook.github.io/react-native
• Search for existing issues: https://github.com/facebook/react-native/issues
• Use the latest React Native release: https://github.com/facebook/react-native/releases

Environment

Run react-native info in your terminal and paste its contents here.
React Native Environment Info:
System:
OS: macOS 10.14
CPU: x64 Intel(R) Core(TM) i5-6267U CPU @ 2.90GHz
Memory: 1.42 GB / 8.00 GB
Shell: 5.4.2 - /usr/local/bin/zsh
Binaries:
Node: 8.4.0 - ~/.nvm/versions/node/v8.4.0/bin/node
npm: 6.4.0 - ~/.nvm/versions/node/v8.4.0/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
IDEs:
Android Studio: 3.2 AI-181.5540.7.32.5056338
Xcode: 10.1/10B61 - /usr/bin/xcodebuild
npmPackages:
react: 16.6.0-alpha.8af6728 => 16.6.0-alpha.8af6728
react-native: 0.57.4 => 0.57.4
npmGlobalPackages:
react-native-cli: 2.0.1
react-native-git-upgrade: 0.2.7

Description

Describe your issue in detail. Include screenshots if needed. If this is a regression, let us know.

Using a Textinput with selectTextOnFocus. If a change causes the textinput to rerender, the text is unselected, even when the rerender change is unrelated to the contents of the box (conditional style change).

This bug is iOS only.

Reproducible Demo

Let us know how to reproduce the issue. Include a code sample, share a project, or share an app that reproduces the issue using https://snack.expo.io/. Please follow the guidelines for providing a MCVE: https://stackoverflow.com/help/mcve

https://snack.expo.io/ryKzDXC3Q

[exoconnor]

Was finally able to fix by setting native props in the callback of requestAnimationFrame. Could not figure out how to get working with selection, onSelectionChange, or selectionState, despite those seeming to be the likely backup solutions.

[cpojer]

Seems like there is a workaround so I'm gonna go ahead and close this one.

[prozwang]

Was finally able to fix by setting native props in the callback of requestAnimationFrame. Could not figure out how to get working with selection, onSelectionChange, or selectionState, despite those seeming to be the likely backup solutions.

could you show me your code, i have met the same problem

[tafty]

Having upgraded from 0.53.3 to 0.61.2 we found this to be an issue in our app. As such, I believe this shouldn't be closed, as there has been a definite regression in behaviour. On the initial render the text is selected and focussed. On the second render the selectTextOnFocus property is still set to be true and therefore the text should remain selected and focussed, just as it used to in version 0.53.3.

However, I was able to workaround the issue by implementing a more restrictive shouldComponentUpdate method on the Component containing the TextInput thus stopping the apparently unnecessary render that results in the loss of text selection.