Closed mozzius closed 4 days ago
:warning: | Newer Version of React Native is Available! |
---|---|
:information_source: | 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. |
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?
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.
https://github.com/facebook/react-native/assets/10959775/40f03d5f-9721-4e4c-a59b-a4d53108af44
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.
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.
@hezi yes, we have been able to repro with "normal" typing on actual devices.
Hey @hezi!
@mozzius may have missed this, was cleaning up some tickets and was reminded of the issue. We definitely have seen this on device as well, albeit not nearly as noticeable. Sometimes though the cursor will indeed skip behind a character or two, though you do need to be typing fairly quickly to notice it.
Appreciate you taking a look at this!
Probably worth noting that this was more prevalent on some older iPhones from my experience. It is much easier to produce on an iPhone X for example than my 14, though it does produce on both.
I have a iPhone 14 pro and the bug raise too. Also when I type on iOS simulator. Any work around or solution?
Is there any progress?
I'd like to propose deprecating controlled inputs in RN (at least in the docs) until this can get prioritized and fixed.
updated repro to 0.75.4, confirmed it's still happening
@cipolleschi Today I have found this issue: https://github.com/facebook/react-native-website/pull/4247 and when you type very fast it happens. Was not aware of this issue, but now its super annoying :D Any idea how to fix this?
@lorenc-tomasz we are currently looking into it and we have a couple ideas on how to fix it. The fix will probably arrive in 0.77. The problem is an hard one, although it doesn't look like, and the current solution arrived after several trade-offs we evaluated in the past to balance perfomance, ergonomics and other aspects.
That said, we are committed to fix it and we are actively working on it: the root cause seems to be Apple's autocorrection that does not behave well when it tries to replace the text with the correction.
The issue is also not as grim as it looks: you need to type really fast to trigger it and this happens on the simulator or on a real device connected to a keyboard. Real devices using the software keyboard are unlikely to hit the problem as it is quite hard to type that fast. If you are still encountering the problem, the suggestion is to avoid using a controlled input.
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. Ifvalue
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
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.75.4
Affected Platforms
Runtime - iOS
Output of
npx react-native info
Stacktrace or Logs
Reproducer
https://github.com/mozzius/laggy-textinput-repro
Screenshots and Videos
https://github.com/facebook/react-native/assets/10959775/247b5ce7-8b5a-49a6-9f8c-96289375c001