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

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;