react / react/react-native

iOS <TextInput multiline/> onChangeText does not fire if only one character

Abierto
#38,105 10 comentarios 4 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Component: TextInput Issue: Author Provided Repro Needs: Triage :mag: Platform: iOS
Lenguaje dominante
C++
Estrellas
127k
Forks
25.3k
Merge medio
1 d 23 h
PR fusionados (30 d)
4

Descripción

Description

The onChangeText for my TextInput used for a ChatBox is not working. After reset the text state to '' (after sending a message), the first character is always lost and the onChange event is not fired.

React Native Version

0.72.0

Output of npx react-native info

System:
OS: macOS 13.4
CPU: (10) x64 Apple M1 Pro
Memory: 45.71 MB / 16.00 GB
Shell:
version: "5.9"
path: /bin/zsh
Binaries:
Node:
version: 16.14.0
path: /usr/local/bin/node
Yarn:
version: 1.22.19
path: /usr/local/bin/yarn
npm:
version: 8.3.1
path: /usr/local/bin/npm
Watchman:
version: 2022.07.04.00
path: /usr/local/bin/watchman
Managers:
CocoaPods:
version: 1.11.3
path: /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms:
- DriverKit 22.4
- iOS 16.4
- macOS 13.3
- tvOS 16.4
- watchOS 9.4
Android SDK: Not Found
IDEs:
Android Studio: 2022.2 AI-222.4459.24.2221.9971841
Xcode:
version: 14.3.1/14E300c
path: /usr/bin/xcodebuild
Languages:
Java:
version: 15.0.2
path: /usr/bin/javac
Ruby:
version: 2.6.10
path: /usr/bin/ruby
npmPackages:
"@react-native-community/cli": Not Found
react:
installed: 18.2.0
wanted: 18.2.0
react-native:
installed: 0.72.0
wanted: 0.72.0
react-native-macos: Not Found
npmGlobalPackages:
"react-native": Not Found
Android:
hermesEnabled: true
newArchEnabled: false
iOS:
hermesEnabled: true
newArchEnabled: false

Steps to reproduce

Happens only with TextInput with multiline enabled, only iOS, only this specific flow

  1. User input any characters into <TextInput/>, and press Send
  2. After msg is sent, <TextInput/> value is cleared via setText('')
  3. After that, when user input one character, onChangeText doesn't fire.

Other flows onChangeText works normally, such as

  • Pressing 2 characters
  • Clear the textinput via backspace
  • Disable multiline
Snack, code example, screenshot, or link to a repository

Snack: https://snack.expo.dev/@tylerc/blessed-ice-cream
The same issue can't be reproduced in Snack, only happens on iOS simulator or actual device

https://github.com/facebook/react-native/assets/86952204/2595e47e-4fda-4a8e-ae93-a4a3221f53b9

import React, {useCallback, useState} from 'react';
import {
  SafeAreaView,
  StyleSheet,
  Text,
  TextInput,
  TouchableOpacity,
  View,
} from 'react-native';

function App(): JSX.Element {
  const [value, setValue] = useState('');

  const onChangeText = useCallback((text: string) => {
    console.log('onChangeText', text);
    setValue(text);
  }, []);

  const onPressSend = useCallback(() => {
    setValue('');
  }, []);

  return (
    <SafeAreaView>
      <View style={styles.container}>
        <TextInput
          style={styles.textInput}
          multiline
          value={value}
          onChangeText={onChangeText}
        />
        <TouchableOpacity style={styles.sendContainer} onPress={onPressSend}>
          <Text
            style={[styles.sendButton, textStateStyle(value).conditionalStyle]}>
            {'Send'}
          </Text>
        </TouchableOpacity>
      </View>
    </SafeAreaView>
  );
}
const textStateStyle = (value: string) =>
  StyleSheet.create({
    conditionalStyle: {color: value.length ? 'dodgerblue' : 'lightgrey'},
  });

const styles = StyleSheet.create({
  container: {flexDirection: 'row'},
  textInput: {
    height: 100,
    flex: 1,
    borderColor: 'black',
    borderWidth: 1,
    marginLeft: 5,
  },
  sendContainer: {
    alignItems: 'center',
    justifyContent: 'center',
    padding: 10,
  },
  sendButton: {fontSize: 16, fontWeight: '800'},
});

export default App;

Guía de contribución

Abrir la guía de contribución

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Línea de trabajo

Comience con la reproducción multiline de TextInput proporcionada en un simulador o dispositivo iOS, centrándose en el restablecimiento del valor controlado después de Send y en la ruta de entrada del primer carácter. Siga el punto de entrada TextInput onChangeText y verifique que el primer carácter después de setValue('') se entregue; confirme que los flujos existentes sigan funcionando.

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

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.