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

[roti-c137]

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

Screen.Recording.2023-06-28.at.10.18.29.AM.mov

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;

[roti-c137]

Same issue with #38094 , only I repro with minimum code

Same issue here. Events onChange and onChangeText are broken on iOS with multiline TextInput. Android is fine. I noticed it after upgrading from 0.67.4 to 0.71.8.

[aroravarun]

@cortinico Please assign the issue to me.

[cortinico]

@cortinico Please assign the issue to me.

Feel free to send over a PR whenever you can

[aroravarun]

@cortinico
Added a PR:
#38166 (comment)

[griffinbaker12]

has this been fixed yet? currently breaking my app..

[griffinbaker12]

I have tried a few other PRs but the issue still persists for me

[Letty]

Will this fix also come to older react-native versions fe 0.71.* ?
I patched the file react-native/Libraries/Text/TextInput/RCTBackedTextInputDelegateAdapter.m in version 71 based on the changes from the PR. But i must say, patching react-native doesn't feel good.
Thanks!

[liuxzzz]

This problem persists to this day