Can't prevent default input in TextInput in controlled component
Nadie ha tomado este issue todavía.
- Lenguaje dominante
- C++
- Estrellas
- 127k
- Forks
- 25.3k
- Merge medio
- 1 d 23 h
- PR fusionados (30 d)
- 4
Descripción
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"
/>
);
};
Guía de contribución
Primeros pasos
- Lee el issue completo y luego la guía de contribución del proyecto.
- Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
- Haz un fork del repositorio y trabaja en una rama.
- Abre un pull request que haga referencia al número del issue.
Línea de trabajo
No se especifica ningún archivo fuente ni ninguna prueba. Empieza ejecutando el ejemplo proporcionado de TextInput controlado en Android y comparándolo con el comportamiento de Expo; se considera terminado cuando la entrada controlada permanece sin cambios al pulsar una tecla o cuando onKeyPress llama a preventDefault().
Escrito por el modelo de indexación a partir del texto del issue.
Evaluación
- Stack tecnológico
- react-native
- Área
- mobile
- Tipo de issue
- Error
- Dificultad
- 4/5
- Tiempo estimado
- 3-5 días
- Estado de actividad
- Estancado
- Claridad
- Bastante claro
- Aptitud para principiantes
- 35/100