Can't modify text in TextInput onChangeText callback on Android #23578
Description
🐛 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: #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