react / react/react-native

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

Ouverte
#38,105 10 commentaires 4 réactions 0 personnes assignées Voir sur GitHub

Personne n'a encore pris cette issue.

Component: TextInput Issue: Author Provided Repro Needs: Triage :mag: Platform: iOS
Langage dominant
C++
Étoiles
127k
Forks
25.3k
Merge moyen
1 j 23 h
PR mergées (30 j)
4

Description

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;

Guide de contribution

Ouvrir le guide de contribution

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Piste de recherche

Commencez par la reproduction multiline de TextInput fournie sur un simulateur ou un appareil iOS, en vous concentrant sur la réinitialisation de la valeur contrôlée après Send et sur le chemin de saisie du premier caractère. Suivez le point d’entrée TextInput onChangeText et vérifiez que le premier caractère après setValue('') est transmis ; confirmez que les flux existants restent fonctionnels.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
react-native
Domaine
mobile
Type d'issue
Bug
Difficulté
4/5
Temps estimé
3-5 jours
Activité
À l'abandon
Clarté
Plutôt claire
Accessibilité débutants
35/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.