iOS 14 TextInput jumping and auto-scrolling on tap

Please provide all the information requested. Issues that do not follow this format are likely to stall.

Description

Brand new build, nothing except the code below. Xcode version 12.0.1 iOS 14. RN 0.63.3. scrolling and tapping makes TextInput jump to random places. Happening on iPhone 11 Pro both simulator and device.

React Native version:

System: OS: macOS 10.15.7 CPU: (16) x64 Intel® Core™ i9-9880H CPU @ 2.30GHz Memory: 973.16 MB / 16.00 GB Shell: 5.7.1 - /bin/zsh Binaries: Node: 12.16.3 - /usr/local/bin/node Yarn: Not Found npm: 6.14.4 - /usr/local/bin/npm Watchman: 4.9.0 - /usr/local/bin/watchman Managers: CocoaPods: 1.9.1 - /usr/local/bin/pod SDKs: iOS SDK: Platforms: iOS 14.0, DriverKit 19.0, macOS 10.15, tvOS 14.0, watchOS 7.0 Android SDK: Not Found IDEs: Android Studio: 3.6 AI-192.7142.36.36.6392135 Xcode: 12.0.1/12A7300 - /usr/bin/xcodebuild Languages: Java: Not Found Python: 2.7.16 - /usr/bin/python npmPackages: @react-native-community/cli: Not Found react: 16.13.1 => 16.13.1 react-native: 0.63.3 => 0.63.3 react-native-macos: Not Found npmGlobalPackages: react-native: Not Found

Steps To Reproduce

Simply have a basic TextInput with enough text to produce a vertical scrollbar, then scroll and tap.

Expected Results

The tap should place cursor at tapped position, and not autoscroll the TextInput to the wrong place.

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

export default class TextField extends Component {

   constructor(){
     super();
     this.state={textInput: ''}
   }

  handleChangeText = (textInput) => {
    this.setState({ textInput });
  }

    return (
        <View style={{flex: 1, backgroundColor: 'blue'}}>
           <TextInput 
            style={{marginTop: 100, height: 300, backgroundColor: 'white'}}
            value={this.state.textInput}
            multiline={true}
            onChangeText={this.handleChangeText}
          ></TextInput>     
        </View>
    )
}

[iKoru]

hello, @tarouboy and everyone. I’m experiencing the same issue and want to fix it. I tried @tarouboy 's solution and it seems the cursor is going to the right position but scroll effect is still the problem (goes to wrong place). any idea to fix this?

[tarouboy]

Update: Removing completely the above lines seems to improve up-down carret movement. i do not know what side effects this might cause though.

Awesome! The jumpy behaviours seems to be fixed.

However, by removing the line completely it will stay at the current position and won’t scroll to the caret position after entering something new at the end of the textInput.

Update: For now it’s my temp solution:

if (@available(iOS 14, *)) {
   // iOS 14 (or newer)
   [super setContentOffset:contentOffset animated:YES];
} else {
   // Turning off scroll animation.
   // This fixes the problem also known as "flaky scrolling".
   [super setContentOffset:contentOffset animated:NO];
}