react / react/react-native

[TextInput] input cannot be controlled

Open
#34,437 10 comments 5 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Component: TextInput Issue: Author Provided Repro Needs: Triage :mag: Never gets stale
Dominant language
C++
Stars
127k
Forks
25.3k
Avg merge
1d 23h
Merged PRs (30d)
4

Description

Description

TextInput value cannot be controlled. Given the following JSX, I expected that typing in the input would do nothing to match behaviour on web:

<TextInput value="" />

Actual behaviour

The value typed by the user flickers on screen before being removed.

https://user-images.githubusercontent.com/175330/185148394-c13e74b7-1319-4948-ae1c-38968a651aa7.MP4

Version

0.70.0-rc.2

Output of npx react-native info

System:
OS: macOS 12.5
CPU: (10) arm64 Apple M1 Max
Memory: 108.61 MB / 32.00 GB
Shell: 5.8.1 - /bin/zsh
Binaries:
Node: 18.7.0 - /usr/local/bin/node
Yarn: Not Found
npm: 8.15.0 - /usr/local/bin/npm
Watchman: 2022.08.15.00 - /opt/homebrew/bin/watchman
Managers:
CocoaPods: 1.11.3 - /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms: DriverKit 21.4, iOS 15.5, macOS 12.3, tvOS 15.4, watchOS 8.5
Android SDK: Not Found
IDEs:
Android Studio: 2021.2 AI-212.5712.43.2112.8815526
Xcode: 13.4.1/13F100 - /usr/bin/xcodebuild
Languages:
Java: 11.0.16 - /usr/bin/javac
npmPackages:
@react-native-community/cli: Not Found
react: Not Found
react-native: Not Found
react-native-macos: Not Found
npmGlobalPackages:
react-native: Not Found

Steps to reproduce
  • Open snack at https://snack.expo.dev/YtYVsPnOU
  • Click iOS (or Android, although it's more intermittent there)
  • Type in the input and note that your value flickers in before being removed
Snack, code example, screenshot, or link to a repository

https://snack.expo.dev/YtYVsPnOU

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 Snack reproduction and the TextInput controlled-value behavior on iOS and Android. Confirm that typing with value="" flickers before being removed, then trace the relevant TextInput implementation and add coverage for the expected controlled-input behavior. Done means the input no longer briefly displays typed text on either platform.

Written by the indexing model from the issue text.

Assessment

Tech stack
react-native
Domain
mobile
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.