[TextInput]: Fixed duplicated letters being added when changing text through onChangeText

[safaiyeh]

Summary

Fix for #11068.
getText().replace caused a bug where letters would be duplicated when the text was being set through onChangeText:

<TextInput ref={(el) => this.input = el} onChangeText={(val) => { this.input.setNativeProps({text: val.toUpperCase()}); }}/>

Debugged and tried a bunch of different ways to solve it explained here: #11068 (comment)

Changelog

[Android] [Fixed] - Fixed duplicated letters being added when changing text through onChangeText

Test Plan

Added this to RNTester:

<TextInput ref={(el) => this.input = el} onChangeText={(val) => { this.input.setNativeProps({text: val.toUpperCase()}); }}/>

Verified it works properly and there were no regressions in the other examples.

Note: There is some performance issues when typing for a long time, probably a lag between clearing and appending. Would love to see if someone has suggestions in handling that.

Edit: Seems like the perf is a known issue #20119

[JoshuaGross]

Does this retain selections when typing in the middle of text?

Could you add some videos?

[safaiyeh]

That is true @JoshuaGross. Append would always put the cursor to the end. Do you have any ideas I could try for this? I debugged this for a while and can't find a solid answer.

Maybe a diff check and find the appropriate place to put the cursor?

[martianatwork]

@safaiyeh@JoshuaGross I’m not expert at this but here are some suggestions, can we introduce a function that transforms the text at java instead of letting keyboard transform text?

Ex. We have autocapitalise option then on changetext we can apply the transformation and forward the updated text to view. Currently user can type in lowercase even if the uppercase is set.

Or we create a transformation prop which will update the text at JavaScript and the complete state will be managed at JavaScript.

I’m not sure about the performance impact.

[safaiyeh]

@martianatwork I like those solutions. I will give them a shot!

One flaw to having options for on change is custom text transforms. I like the second solution because it can cover both.

[vonovak]

textinput is very tricky. We wrote our own component for rich text input, and just want to add that if this is to be merged, it should be very thoroughly tested. I think some issues will only get resolved once we have sync communication between JS and native (fabric stable).

[safaiyeh]

Is that component open sourced? @vonovak

Ive working on a text input heavy app and the performance kills UX at some point.

[vonovak]

@safaiyeh no, it's not open sourced, and it's highly unlikely that it would be...

[fabOnReact]

Pull request safaiyeh#2

IntegercurrentPosition = getSelectionStart();
getText().clear();
append(spannableStringBuilder);
setSelection(currentPosition);

setSelection sets the cursor position to the previous one after append operation.

This is some quick testing of the functionality with the react-native master branch. Let me know your feedback, I can publish a separate Pull Request if you are not available otherwise I can futher help you to review your pull request and test the changes.

BEFORE	AFTER

Thanks a lot
Fabrizio Bertoglio

[fabOnReact]

#29070

[ftzi]

I have the same issue when using toUpperCase method on the input string.

[sdandois]

How can I apply this as a patch?

[lunaleaps]

@safaiyeh, @fabriziobertoglio1987 Is this PR still relevant with #29070 open? They seem like they both fix issue #11068.

If so, can I close this PR?

[safaiyeh]

Yup that PR takes care of it. I’ll close this @lunaleaps