iOS <TextInput multiline/> onChangeText does not fire if only one character
Chưa có ai nhận issue này.
- Ngôn ngữ chính
- C++
- Star
- 127k
- Fork
- 25.3k
- Merge trung bình
- 1 ngày 23 giờ
- Pull request đã merge (30 ngày)
- 4
Mô tả
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
- User input any characters into
<TextInput/>, and press Send - After msg is sent,
<TextInput/>value is cleared viasetText('') - After that, when user input one character,
onChangeTextdoesn'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;
Hướng dẫn đóng góp
Bắt đầu từ đâu
- Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
- Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
- Fork repository và làm thay đổi trên một nhánh.
- Mở pull request có tham chiếu số hiệu của issue.
Hướng nghiên cứu
Bắt đầu với bản tái hiện multiline TextInput được cung cấp trên trình mô phỏng hoặc thiết bị iOS, tập trung vào việc đặt lại giá trị được kiểm soát sau Send và đường dẫn nhập ký tự đầu tiên. Theo dõi điểm đầu vào TextInput onChangeText và xác minh rằng ký tự đầu tiên sau setValue('') được truyền đi; xác nhận rằng các luồng hiện có vẫn hoạt động.
Do mô hình lập chỉ mục viết ra từ nội dung của issue.
Đánh giá
- Công nghệ
- react-native
- Lĩnh vực
- mobile
- Loại issue
- Lỗi
- Độ khó
- 4/5
- Thời gian dự kiến
- 3-5 ngày
- Mức độ hoạt động
- Đình trệ
- Độ rõ ràng
- Khá rõ ràng
- Mức phù hợp với người mới
- 35/100