react / react/react-native

Can't modify text in TextInput onChangeText callback on Android

Đang mở
#23,578 77 bình luận 25 reaction 1 người được giao Xem trên GitHub

@ericlewis đang làm issue này rồi.

Từ ngày 19/3/2019.

Bug Component: TextInput Platform: Android Priority: Mid
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ả

🐛 Bug Report

On Android, modifying the text within the onChange (or onChangeText) callback causes corruption of the text in the TextInput. (Not tested on iOS.)

For example, I'm trying to force all caps in my TextInput field. (This is to work around the react native autoCapitalize issue described here: https://github.com/facebook/react-native/issues/8932). So if a lowercase letter is entered, I change it to uppercase in the callback. Unfortunately, alternate keystrokes cause the entire previous text to be duplicated, but only if the entered keystroke was lowercase.

So, when forcing all caps, entering 1234 results in 1234 showing up; entering ABCD results in ABCD showing up; but entering abcd results in AABCAABCD.

This issue disappears if assigning a Math.random() key to the TextInput; but then of course so does the keyboard focus, making this an unacceptable workaround.

To Reproduce

See "Bug Report" and "Code Example" sections.

Expected Behavior

One should be able to modify the value inside TextInput's change callbacks, without the text becoming corrupted on the subsequent redisplay.

Code Example

export default class TestScr extends Component
{
  constructor(props)
  {
	super(props);
	this.state = { s6: '' };
  }
  textchg(event)
  {
	const {eventCount, target, text} = event.nativeEvent;
            // one would expect the contents of s6 to display after the redraw
	this.setState({ s6: text.toUpperCase() }); 
  }
  render()
  {
            // [same behavior if using onChangeText instead of onChange]
	let jsx0 = <View style={{ flexDirection: 'row' }} key={ 'hi' }>
		<TextInput placeholder={ 'hello' } value={ this.state.s6 }
			onChange={ (evt) => this.textchg(evt) }
			keyboardType={ 'default' } />
		</View>;
		
	return (<View style={{ backgroundColor: '#ffffff', padding: 10, }}>
		<ScrollView style={{ backgroundColor: '#ffffff', }}>
			{ jsx0 }
		</ScrollView>
	</View>);
  }
}

Environment

React Native Environment Info:
System:
OS: Linux 3.19 Ubuntu 14.04.3 LTS, Trusty Tahr
CPU: (4) x64 Intel(R) Core(TM) i7-5500U CPU @ 2.40GHz
Memory: 626.14 MB / 15.38 GB
Shell: 6.18.01 - /bin/tcsh
Binaries:
Node: 8.11.3 - /usr/bin/node
npm: 5.6.0 - /usr/bin/npm
SDKs:
Android SDK:
API Levels: 10, 16, 23, 26, 27, 28
Build Tools: 19.1.0, 20.0.0, 21.1.2, 22.0.1, 23.0.1, 23.0.2, 26.0.3, 27.0.3, 28.0.2, 28.0.3
System Images: android-16 | ARM EABI v7a, android-23 | Intel x86 Atom_64, android-23 | Google APIs Intel x86 Atom_64, android-28 | Google APIs Intel x86 Atom
npmPackages:
react: 16.6.3 => 16.6.3
react-native: 0.58.6 => 0.58.6
npmGlobalPackages:
create-react-native-app: 1.0.0
react-native-cli: 2.0.1

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. 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.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Đánh giá

Issue này chưa được đánh giá.

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.