[Android] Fix letters duplication when using autoCapitalize

ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactEditText.java

@@ -111,6 +111,7 @@ public class ReactEditText extends AppCompatEditText
   private int mFontStyle = ReactTypefaceUtils.UNSET;
   private boolean mAutoFocus = false;
   private boolean mDidAttachToWindow = false;
+  private @Nullable Integer mMaximumTextLength = null;
 
   private ReactViewBackgroundManager mReactBackgroundManager;
 
@@ -331,7 +332,9 @@ public void maybeSetSelection(int eventCounter, int start, int end) {
     }
 
     if (start != UNSET && end != UNSET) {
-      setSelection(start, end);
+      int validStart = (start > mMaximumTextLength) ? mMaximumTextLength : start;
+      int validEnd = (end > mMaximumTextLength) ? mMaximumTextLength : end;
+      setSelection(validStart, validEnd);
     }
   }
 
@@ -510,6 +513,7 @@ public boolean canUpdateWithEventCount(int eventCounter) {
 
   // VisibleForTesting from {@link TextInputEventsTestCase}.
   public void maybeSetText(ReactTextUpdate reactTextUpdate) {
+    mMaximumTextLength = reactTextUpdate.getText().length();
     if (isSecureText() && TextUtils.equals(getText(), reactTextUpdate.getText())) {
       return;
     }
@@ -553,7 +557,10 @@ public void maybeSetText(ReactTextUpdate reactTextUpdate) {
       // When we update text, we trigger onChangeText code that will
       // try to update state if the wrapper is available. Temporarily disable
       // to prevent an infinite loop.
-      getText().replace(0, length(), spannableStringBuilder);
+      Integer startPosition = getSelectionStart();
+      setText(spannableStringBuilder);
+      mMaximumTextLength = spannableStringBuilder.length();
+      setSelection(startPosition);
     }
     mDisableTextDiffing = false;
 

packages/rn-tester/js/examples/TextInput/TextInputSharedExamples.js

@@ -91,18 +91,16 @@ class RewriteExample extends React.Component<$FlowFixMeProps, any> {
     this.state = {text: ''};
   }
   render() {
-    const limit = 20;
+    const limit = 100;
     const remainder = limit - this.state.text.length;
     const remainderColor = remainder > 5 ? 'blue' : 'red';
     return (
       <View style={styles.rewriteContainer}>
         <TextInput
           testID="rewrite_sp_underscore_input"
-          autoCorrect={false}
-          multiline={false}
           maxLength={limit}
           onChangeText={text => {
-            text = text.replace(/ /g, '_');
+            text = text.replace(/ /g, '_').toUpperCase();
             this.setState({text});
           }}
           style={styles.default}
@@ -122,18 +120,40 @@ class RewriteExampleInvalidCharacters extends React.Component<
 > {
   constructor(props) {
     super(props);
-    this.state = {text: ''};
+    this.state = {text: '', selection: {start: -1, end: -1}};
   }
+
+  onSelectionChangeHandler = ({nativeEvent: {selection}}) => {
+    const {start, end} = selection;
+    const {text} = this.state;
+    const maxEnd = text.length;
+    const validEnd = end > maxEnd ? maxEnd : end;
+    const validStart = start > maxEnd ? maxEnd : start;
+    const newSelection = {start: validStart, end: validEnd};
+    this.setState({selection: newSelection});
+  };
+
   render() {
+    const {
+      text,
+      selection: {start, end},
+    } = this.state;
     return (
       <View style={styles.rewriteContainer}>
         <TextInput
           testID="rewrite_no_sp_input"
           autoCorrect={false}
-          multiline={false}
+          multiline={true}
           onChangeText={text => {
-            this.setState({text: text.replace(/\s/g, '')});
+            const newText = text.replace(/\s/g, '');
+            const newEnd = end - 1;
+            this.setState({
+              text: newText,
+              selection: {start: newEnd, end: newEnd},
+            });
           }}
+          onSelectionChange={this.onSelectionChangeHandler}
+          selection={{start: start, end: end}}
           style={styles.default}
           value={this.state.text}
         />
@@ -457,8 +477,7 @@ module.exports = ([
     },
   },
   {
-    name: 'maxLength',
-    title: "Live Re-Write (<sp>  ->  '_') + maxLength",
+    title: "Live Re-Write (<sp>  ->  '_' -> toUpperCase) + maxLength",
     render: function(): React.Node {
       return <RewriteExample />;
     },