react / react/react-native

Can't prevent default input in TextInput in controlled component

Offen
#38,155 16 Kommentare 11 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

Component: TextInput Issue: Author Provided Repro Needs: Attention
Vorherrschende Sprache
C++
Sterne
127k
Forks
25.3k
Ø Merge
1 T. 23 Std.
Gemergte PRs (30 T.)
4

Beschreibung

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"
    />
  );
};

Beitragsleitfaden

Beitragsleitfaden öffnen

Erste Schritte

  1. Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
  3. Forke das Repository und arbeite in einem Branch.
  4. Öffne einen Pull Request, der die Issue-Nummer nennt.

Rechercherichtung

Es wird keine Quelldatei oder kein Test genannt. Beginne damit, das bereitgestellte kontrollierte TextInput-Beispiel auf Android auszuführen und es mit dem Verhalten von Expo zu vergleichen; abgeschlossen ist die Aufgabe, wenn die kontrollierte Eingabe unverändert bleibt, wenn eine Taste gedrückt wird oder wenn onKeyPress preventDefault() aufruft.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
react-native
Bereich
mobile
Issue-Typ
Bug
Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
35/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.