[Android] Fix letters duplication when using autoCapitalize

[fabOnReact]

Summary

This issue fixes #11068 fixes #30393 fixes #27449 fixes #29063 fixes #23578 fixes #30503 fixes #25265.

PROBLEM 1 - TextInput autoCapitalize creates duplicated letters
The issue is caused by textinput/ReactEditText.java#L556 which replaces the text from a starting position 0 to end position length(), but causes letters duplication (more info). The solution proposed in this pr to the above issue is:

1. store the previous cursor position in variable start/endPosition
2. use setText() to change the TextInput value
3. restore the cursor to the previous start/endPosition

PROBLEM 2 - setSpan (6 ... 6) ends beyond length 3
Reported from Joshua in this comment and reported with issue #29063

Exception in native call java.lang.IndexOutOfBoundsException: 
setSpan (6 ... 6) ends beyond length 3

The fix for this issue was merged in master with commit EditText: maintain cursor position when text changes. Relevant discussions are #29070-comment and my commits check for reactTextUpdate.length, revert changes to maybeSetSelection , code review).
Related:

1. discussing difference between setText() and replace() in the ReactEditText.java API issues/30393#issuecomment-752676908
2. discussing how JS TextInput keeps internal states and updates it in the ReactEditText.java API issues/29063#issuecomment-658189938
3. TextInput becomes slow after lots of typing
4. breaking down why TextInput becomes slow after lots of typing
5. AOSP method TextView setText
6. AOSP method TextView getText
7. AndroidTextInputShadowNode method updateStateIfNeeded
8. Editable method replace()

Changelog

[Android] [Fixed] - Fix letters duplication when using autoCapitalize

Test Plan

This changes fix the Java API. The Java tests are disabled for this component as explained in commit Disabled unit tests that need yoga libs when running . Detailed tests included in pull/29070#issuecomment-1065799687.

Notes

Pull request #27757 from @safaiyeh fixed letters duplication, but introduced a regression (changing the cursor position). This pull request fixes letters duplication without changing the cursor position and avoid Runtimes caused by moving the cursor to invalid position.

[JoshuaGross]

@fabriziobertoglio1987 I tested this in FB on a few screens and I'm running into this with some controlled TextInputs:

setSpan(5 ... 5) ends beyond length 4

So it looks like there are some out-of-bounds issues, in particular with controlled TextInputs

[fabOnReact]

• test setTextKeepState
• fix the problem without using setText (regression in fabric)
• complete task from 21st of March

[fabOnReact]

using setText instead of replace changes TextInput height

Expected Result:
The TextInput does not change size while typing on fabric

Actual Result
The TextInput changes size

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

Lines 544 to 547 in 3b7581c

	// The current text gets replaced with the text received from JS. However, the spans on the
	// current text need to be adapted to the new text. Since TextView#setText() will remove or
	// reset some of these spans even if they are set directly, SpannableStringBuilder#replace() is
	// used instead (this is also used by the keyboard implementation underneath the covers).

click to open code used in the test

class RewriteExample extends React.Component<$FlowFixMeProps, any> {
  constructor(props) {
    super(props);
    this.state = {text: ''};
  }
  render() {
    const limit = 20;
    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, '_').toUpperCase();
            this.setState({text});
          }}
          style={styles.default}
          value={this.state.text}
        />
        <Text style={[styles.remainder, {color: remainderColor}]}>
          {remainder}
        </Text>
      </View>
    );
  }
}

click to open recording of test case

2022-03-21.14-06-38.mp4

[t-fritsch]

hi @fabriziobertoglio1987

thanks for the efforts you put into this issue.

I wonder why you closed this PR ? This bug is so annoying.. I teach React Native since a long time now and having such "stupid" bug isn't really giving confidence to newcomers. This may not have been a problem in the past, but now RN has rising competitors that give the impression to be much more stable.

[fabOnReact]

Thanks @t-fritsch.

My knowledge of the react-native ReactEditText API improved a lot in the last 3 years.
I wanted to publish an improved solution but never had the time.

I can prioritize this task if you want.

[github-actions]

	Fails
🚫	📋 Missing Changelog - Please add a Changelog to your PR description. See Changelog format

Generated by 🚫 dangerJS against 6e6ab1b

[fabOnReact]

This PR is included in the react-native-improved library:

react-native-improved

• Supports ONLY react-native 0.73.
• Supports only old architechture (new architechture is WIP)

Set-up

In package.json

 "scripts": {
+  "postinstall": "yarn run react-native-patch"
 }

Then

npm

npm install react-native-improved --save-dev

yarn v1

yarn add react-native-improved --dev