Repository navigation
Setting the value of a controlled TextInput breaks when autocorrect suggestion present #27019
Description
On iOS, something wonky happens when the value of a TextInput is programmatically modified (via setState and the value property of said TextInput) and an autocorrect suggestion is present.
The value of the text input ends up being set to the combination of the autocorrect suggestion and the programmatic value. This only happens when multiline={true}. When multiline={false}, all is fine.
This seems only to be reproducible on iOS. I was not able to reproduce on the Snack iOS simulator. This can be reproduced using the software keyboard in the Snack iOS simulator with multiline={true}. The Snack iOS simulator does not reproduce with multiline={false}, but this does reproduce on a device.
React Native version: 0.59-0.76
Steps To Reproduce
- Start the reproducer: https://snack.expo.dev/@mhoran/trusting-peanut
- Type "Yo mh" and wait for the auto-correct suggestion of "my"
- Click "Bananas!"
- Notice that the value set programmatically will become a combination of the autocorrect value and the programmatic value.
Describe what you expected to happen:
I expected the value to be set to "Yo mhoran".
Snack, code example, screenshot, or link to a repository:
Activity
Disable multiline input
stale commentedon Jan 25, 2020
Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.
mhoran commentedon Jan 26, 2020
This is still an issue.
stale commentedon Apr 25, 2020
Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.
mhoran commentedon Apr 25, 2020
This is still an issue.
backmeupplz commentedon May 18, 2020
Any news on this?
rikur commentedon May 20, 2020
Related issue: #28025
fabOnReact commentedon May 20, 2020
you did not provide the info, the issue was not flagged as Platform iOS
backmeupplz commentedon May 21, 2020
@fabriziobertoglio1987 what info should be provided? Sorry, I'm not OP but I can help with my case.
4 remaining items
backmeupplz commentedon Jun 30, 2020
@Ashoat do we need to provide any more info about this?
Ashoat commentedon Jun 30, 2020
I don't think so, the repro should be enough. I wouldn't expect anybody to solve this for you anytime soon though. If you need it fixed the best solution would be to put up a PR.
fabOnReact commentedon Jul 21, 2020
@backmeupplz I'm sorry. I don't work on iOS. I just work on Android. I hope somebody working on iOS will be bable to help you. Thanks a lot. Sorry I did not read the other emails. I wish you a good day. Fabrizio
about the info, I was referring to the output from react-native info which allows the bot to add a Tag. I use that tag to filter Android issues as I don't work on iOS, but nevermind. Seems that the issue is tagged now. Thanks a lot.
github-actions commentedon Mar 25, 2023
This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.
Ashoat commentedon Mar 25, 2023
The Expo snack repro doesn't appear to work in Expo 47. Would somebody mind updating it so that this issue doesn't go stale?
mhoran commentedon Mar 25, 2023
Updated the Snack: https://snack.expo.dev/@mhoran/trusting-peanut.
mhoran commentedon Oct 27, 2024
This issue persists with React Native 0.76.0 and New Arch.
mhoran commentedon Oct 28, 2024
This is also an issue for single-line TextInputs now as well, and and is not tied to old vs new architecture. As a workaround I was able to set
autoCorrect={false}.The issue does not seem to repro in the Snack with single-line TextInput but on a device I see this behavior. It could have something to do with the speed of the device.
[-]Setting the value of a multiline TextInput with breaks when autocorrect suggestion present[/-][+]Setting the value of a controlled TextInput breaks when autocorrect suggestion present[/+]Disable autocorrect and re-enable multiline input
pixelmaxxing commentedon Nov 14, 2024
I can't believe this issue has been active for 5 years !!!!!
TextInput value and defaultValue completely break the input's behavior, it does some weird selecting, double tap period does not work on iOS and autosuggest too ....
mhoran commentedon Nov 14, 2024
Many issues with controlled TextInput have been fixed as of 0.76.1 so long as you are using the New Architecture. Unfortunately this issue persists.
I've updated the Snack to Expo v52 to show the continued erroneous behavior.
mhoran commentedon Jan 31, 2025
The issue here seems to be that any interaction other than a keypress causes the autocorrect suggestion to be accepted. There is then a race condition between the autocorrect acceptance and subsequent state update via
valueproperty change (or direct manipulation viasetNativeProps). Over time, this race seems to have changed from favoring the state update / direct manipulation to favoring autocorrect acceptance.I am not how to fix this. The recommendation for native iOS programming seems to be to use
textView:shouldChangeTextInRange:replacementText:to reject autocorrect suggestions. However, this delegate method is called on user interaction, prior to thevalueproperty change. In native iOS programming,shouldChangeTextInRangecould check a variable to see if the autocorrect suggestion should be rejected, but that does not work with the asynchronous model of React Native.I was able to implement an alternative workaround (leaving
autoCorrectenabled) usingsetTimeout, but that isn't great since the user will see a flash of incorrect text. Presumably this experience could be improved via native code to force property change / direct manipulation to override the autocorrect suggestion, but I haven't found a way to do that. The asynchronous state update makes this pretty challenging, and until we have synchronous state updates (see #46973) there may be nothing we can do here.