react / react/react-native

Setting the value of a controlled TextInput breaks when autocorrect suggestion present

Open
#27,019 21 comments 6 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Bug Component: TextInput Issue: Author Provided Repro Platform: iOS
Dominant language
C++
Stars
127k
Forks
25.3k
Avg merge
1d 23h
Merged PRs (30d)
4

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

  1. Start the reproducer: https://snack.expo.dev/@mhoran/trusting-peanut
  2. Type "Yo mh" and wait for the auto-correct suggestion of "my"
  3. Click "Bananas!"
  4. 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:

https://snack.expo.dev/@mhoran/trusting-peanut

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the linked Snack reproducer and the React Native TextInput behavior involving setState, the value property, multiline input, and iOS autocorrect. Reproduce the issue on an iOS device and compare the resulting value with the expected "Yo mhoran"; done means programmatic updates no longer combine with the pending autocorrect suggestion.

Written by the indexing model from the issue text.

Assessment

Tech stack
ios, react-native
Domain
mobile-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.