react / react/react-native

Can't prevent default input in TextInput in controlled component

Open
#38,155 16 comments 11 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

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

Description

Description

The comment in #24585 suggested creating another issue for this. It's also similar to #23578.

The problem is that you can't prevent the default behavior of controlled TextInput in ReactNative.

I've asked this on StackOverflow: How to prevent adding typed keys into controlled TextInput in React-Native?. But looking at similar issues this is a bug (or missing feature) in ReactNative.

React Native Version

0.71.8

Output of npx react-native info

info Fetching system and libraries information...
System:
OS: Linux 5.19 Ubuntu 22.04.2 LTS 22.04.2 LTS (Jammy Jellyfish)
CPU: (8) x64 Intel(R) Core(TM) i5-10210U CPU @ 1.60GHz
Memory: 19.22 GB / 30.98 GB
Shell: 5.1.16 - /bin/bash
Binaries:
Node: 20.3.0 - ~/.nvm/versions/node/v20.3.0/bin/node
Yarn: 1.22.19 - ~/.nvm/versions/node/v20.3.0/bin/yarn
npm: 9.6.7 - ~/.nvm/versions/node/v20.3.0/bin/npm
Watchman: Not Found
SDKs:
Android SDK: Not Found
IDEs:
Android Studio: Not Found
Languages:
Java: 1.8.0_362 - /usr/bin/javac
npmPackages:
@react-native-community/cli: Not Found
react: 18.2.0 => 18.2.0
react-native: 0.71.8 => 0.71.8
npmGlobalPackages:
react-native: Not Found
info React Native v0.72.1 is now available (your project is running on v0.71.8).
info Changelog: https://github.com/facebook/react-native/releases/tag/v0.72.1
info Diff: https://react-native-community.github.io/upgrade-helper/?from=0.71.8
info For more info, check out "https://reactnative.dev/docs/upgrading".

Steps to reproduce

Type the number into the input field with the code below. The code works on the Expo playground but fails on Android Emulator (didn't tested on a real device).

From the demo I expect the input to not change.

Snack, code example, screenshot, or link to a repository
const ControlledComponent = () => {
  const [state, setState] = useState('0.00');
  const cursor = 1;
  return (
    <TextInput
      ref={ref}
      autoFocus
      onKeyPress={() => { /* empty */ }}
      selection={{start: cursor, end: cursor}}
      value={state}
      keyboardType="numeric"
    />
  );
};

event.preventDefault() also doesn't work:

const ControlledComponent = () => {
  const [state, setState] = useState('0.00');
  const cursor = 1;
  return (
    <TextInput
      ref={ref}
      autoFocus
      onKeyPress={(e) => { e.preventDefault() }}
      selection={{start: cursor, end: cursor}}
      value={state}
      keyboardType="numeric"
    />
  );
};

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

No source file or test is named. Start by running the provided controlled TextInput example on Android and comparing it with the Expo behavior; done means the controlled input remains unchanged when a key is typed or when onKeyPress calls preventDefault().

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.