TextInput duplicate value when inserting at the beginning (ios) maxLength

[MadeinFrance]

• Review the documentation: https://facebook.github.io/react-native
• Search for existing issues: https://github.com/facebook/react-native/issues
• Use the latest React Native release: https://github.com/facebook/react-native/releases

Environment

React Native Environment Info:
System:
OS: macOS High Sierra 10.13.6
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 10.10.0 - /usr/local/bin/node
Yarn: 1.9.4 - /usr/local/bin/yarn
npm: 6.4.1 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 11.4, macOS 10.13, tvOS 11.4, watchOS 4.3
IDEs:
Xcode: 9.4.1/9F2000 - /usr/bin/xcodebuild
npmPackages:
react: 16.5.0 => 16.5.0
react-native: 0.57.2 => 0.57.2
npmGlobalPackages:
create-react-native-app: 1.0.0
react-native-cli: 2.0.1
react-native-git-upgrade: 0.2.7
react-native: 0.57.2

Description

[iOS only]

When entering 1 character at the beginning of the TextInput, we expect to have only 1 character inserted. However we experience that the character is inserted and the current value is duplicated.

This behaviour is reproducible when the prop maxLength is used and when length of the current value is above the half of the maxLength prop.

I have created an app from scratch using create-react-native-app, and I have modified App.js to include the following:

type Props = {};
export default class App extends Component<Props> {
 constructor(props) {
 super(props);
 this.state = { text: '10000' };
 }

 render() {
 return (
 <View style={styles.container}>
 <TextInput
 style={{height: 40, width:120, borderColor: 'gray', borderWidth: 1}}
 maxLength={10}
 onChangeText={(text) => this.setState({text})}
 value={this.state.text}/>
 </View>
 );
 }
}

Reproducible Demo

---

Core investigation

1. In RCTBaseTextInputView.m the ivar _predictedText is not updated correctly when inserting at the beginning.

[JumalDB]

Have the same issue on 0.57.3.

[JumalDB]

It seems that issue is solved in 0.57.4.