TextInput cursor lags behind text when component is controlled if Auto-Correction and Predictive Text are enabled

[mozzius]

Description

Whilst typing very fast, we've observed that the cursor can lag behind where you are typing, which means that characters get inserted in the middle of the word. We believe that we've narrowed it down to something with the autocorrect/predictive text messing up the cursor position. This only happens to fully controlled inputs - specifically if passing it the value prop. If value is not passed, it seems to be unaffected.

Going into Settings > General > Keyboard and turning off both "Auto-Correction" and "Show Predictions Inline" resolves the issue entirely, leading us to believe it's something to do with the iOS 17 inline predictive text. However, we've found that disabling autocorrect via the autoCorrect prop does not consistently fix the issue, although it improves it ever so slightly.

We've observed this in production on iOS, but is a lot easier to replicate on the iOS simulator (presumably since it's slower).

Steps to reproduce

1. Install the app on the iOS simulator
2. Type as fast as you possibly can into both text inputs
3. Observe the top text input's cursor is not at the end of the text, and the bottom text input's cursor is at the end of the text
4. Go to Settings > General > Keyboard and turn off both "Auto-Correction" and "Show Predictions Inline" and repeat - both inputs should now behave properly with the cursor at the end of the text

Note that the spam typing does not have a 100% success rate, so you might have to try a couple of times

React Native Version

0.73.7

Affected Platforms

Runtime - iOS

Output of npx react-native info

System:
  OS: macOS 14.4.1
  CPU: (8) arm64 Apple M1
  Memory: 405.22 MB / 16.00 GB
  Shell:
    version: 3.7.0
    path: /opt/homebrew/bin/fish
Binaries:
  Node:
    version: 21.7.1
    path: /opt/homebrew/bin/node
  Yarn:
    version: 1.22.19
    path: /opt/homebrew/bin/yarn
  npm:
    version: 10.2.5
    path: /opt/homebrew/bin/npm
  Watchman:
    version: 2024.04.15.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.15.2
    path: /opt/homebrew/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 23.4
      - iOS 17.4
      - macOS 14.4
      - tvOS 17.4
      - visionOS 1.1
      - watchOS 10.4
  Android SDK:
    API Levels:
      - "33"
      - "34"
    Build Tools:
      - 30.0.3
      - 33.0.0
      - 33.0.1
      - 34.0.0
    System Images:
      - android-34 | Google APIs ARM 64 v8a
    Android NDK: Not Found
IDEs:
  Android Studio: 2023.1 AI-231.9392.1.2311.11330709
  Xcode:
    version: 15.3/15E204a
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 11.0.22
    path: /opt/homebrew/opt/openjdk@11/bin/javac
  Ruby:
    version: 2.6.10
    path: /usr/bin/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.73.7
    wanted: 0.73.7
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: true
  newArchEnabled: false

Stacktrace or Logs

n/a

Reproducer

https://github.com/mozzius/laggy-textinput-repro

Screenshots and Videos

Simulator.Screen.Recording.-.iPhone.15.-.2024-04-19.at.01.55.32.mp4

[github-actions]

⚠️

Newer Version of React Native is Available!

ℹ️

You are on a supported minor version, but it looks like there's a newer patch available - 0.73.7. Please upgrade to the highest patch for your minor or latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If it does not repro, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the most recent releases.

[cipolleschi]

Hi @mozzius, thanks for the issue and also for the reproducer, that's super valuable.

FWIW, I have seen the cursor jumping also in fully Native apps. We will surely investigate the issue, but it could also be something on Apple side, especially if you mention that this is starting happening in iOS 17 specifically.

Would you be able to test it on an iOS 16 device?

[mozzius]

Here's an 16.4 simulator - surprisingly, it's present here too. It's definitely still the autocorrect though - turning off "Auto-Correction" and "Predictive" fixes it.

Screen.Recording.2024-04-19.at.15.21.48.mov

[megantaylor]

So happy to come across this issue, as I've been assuming I was somehow doing something wrong in my uses of TextInput while trying to debug this problem in my app.

While researching, I was reminded of this change from a couple of years ago: https://reactnative.dev/blog/2021/09/01/preparing-your-app-for-iOS-15-and-android-12#quicktype-bar

Could totally be a red herring, but just thought I'd throw it out there in case its somehow relevant. I tried testing inputs with spellcheck disabled, but due to the inconsistency of the bug, I'm having a hard time deciding if it's actually making a difference or not.

[hezi]

Took some time to look at this yesterday, seems to boil down to -[RCTTextInputComponentView _setAttributedString:] not keeping up (specifically position calculation) with user when spamming keys while autocorrect/spellcheck is involved (quick way to test: spam just numbers and it works perfectly.)

I'll set aside some time today or tomorrow to dig deeper, but if anyone wants to give it a go - you are more than encouraged to do so :)

I'm curious though: @mozzius @megantaylor - Are you seeing this happen with "normal" user typing? I couldn't repro when typing normal text on a phone.

[megantaylor]

@hezi yes, we have been able to repro with "normal" typing on actual devices.