android controlled text input not working as expected (duplicates the given string)

[Niryo]

Please provide all the information requested. Issues that do not follow this format are likely to stall.

Description

basically this is a reopening of this issue: #19085
on my Xiaomi a1 device, when trying to use a controlled textInput, the input goes crazy and start adding duplications of the current string. Adding visible-password to keyboardType solves the issue, but it doesn't fit my use-case.

React Native version:

[email protected]

Steps To Reproduce

1. create a controlled textInput
2. test it on xiaomi A1 device

[fabOnReact]

Thanks @Niryo, me and @safaiyeh wrote two prs #27757 #29070 to fix a similar issue in TextInput that may offer some guidance in understanding how TextInput state in ReactNative TextInput.js and ReactAndroid TextInput component is stored...

#29070 was trying to fix issue caused by getText().replace(0, length(), spannableStringBuilder)

.replace() will duplicate letters when using capitalize, but If I try to use EditText method setText() the problem is solved.

The difference between setText() and replace():

• replace() causes this type of bugs (duplication) when using wrong start end position

const text = "my text";
text.replace(2,7);
console.log("text", text);
// "my my text" (aproximately!!)

• setText will reset the cursor position, we fix this saving previous position state and then calling setPosition after setText()
• calling setPosition can cause out of bounds errors if new_position > text.length
  [Android] Fix letters duplication when using autoCapitalize #29070 (comment) setSpan(5 ... 5) ends beyond length 4. Fixed with https://github.com/facebook/react-native/pull/29070/files#diff-b941f6bcdff5060918b3091d619bae6ac105c05229ab635e33ded4fcba5bf2a7R317-R31

As explained #29070 (comment) and #29063 (comment), if you set the TextInput value state in JavaScript and then change the text (for example w i t h s p a c e in withspace), the Java side of TextInput (ReactEditText.java) does not keep track of this internal state and triggers the errors described above. This is the weakness of my solution. The two below test cases from rn-tester TextInput verify that TextInput component work properly when managing internally their state value in JavaScript (by removing spaces from the inputted text)

Android Controlled Comp replace Chars with Capitalized letters	Android Controlled Component replace Spaces

as you can see in my pr https://github.com/facebook/react-native/pull/29070/files#diff-637b194a475487dde7656c3f35995fbe49c800b79b19be01e89ffe22ac98df49R125-R134 and the above gifs, I was able to create TextInput which would fully control the TextInput state (position and value) on the JS Side, this way finding a workaround around the limitations of the current Java/JavaScript API

But I believe this is not a good solution as it introduces a regression on iOS

I believe that the TextInput useEffect hook should detect this update in the JS TextInput value and trigger update on the Java TextInput internal state #29070 (comment)

This hook seems to be responsible to ignore updates to the TextInput value from the Java side, but does not trigger.

react-native/Libraries/Components/TextInput/TextInput.js

Lines 903 to 913 in 1d05d46

	}, [
	mostRecentEventCount,
	inputRef,
	props.value,
	props.defaultValue,
	lastNativeText,
	selection,
	lastNativeSelection,
	text,
	viewCommands,
	]);

adding incrementAndGetEventCounter(); after setText(spannableStringBuilder) seems to trigger the useEffect hook, but I believe the real issue is the length of the text. We are adding a space character to the text, but the useEffect hook does not trigger because the text seems to not change lenght.

Also the java functionality now changes the position of the cursor with setSelection(startPosition) which could cause issues with the useEffect hook that restore the TextInput value and selection

react-native/Libraries/Components/TextInput/TextInput.js

Lines 898 to 900 in 1d05d46

	text,
	selection?.start ?? -1,
	selection?.end ?? -1,

for this reason and given the limited amount of time available, I decided to work on other easier to solve issues.

Thanks a lot
Good luck 🙏

[fabOnReact]

I wrote a pr #11068 for similar issue #29070 Thanks

[fabOnReact]

Please, is it possible to merge this PR in the next version ?

To answer the question of when the pr #29070 which fixes this issue will be released in the next version of React Native, I suggest you to follow the discussions at https://github.com/react-native-community/releases/issues by subscribing to those threads. The process of releasing a new version with a bug fix is the following:

• an Issue is opened in facebook/react-native
• a contributor writes a Pull Request to fix/close the react-native Issue
• The Pull Request is merged in Master
• For each realease (the upcoming one is 0.64.1) there will be a separate discussion on https://github.com/react-native-community/releases/issues where anyone can request a commit to be cherrypicked from master. The link need to be from the a commit from master (for ex. [Android] Adding Hyphenation Frequency prop for Text component #29157 (comment)) and not a Pull Request not yet merged in master ☮️ 🙏

[github-actions]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions]

This issue was closed because it has been stalled for 7 days with no activity.

[fabOnReact]

Do you still experience this issue?

I have four years of experience maintaining facebook/react-native and I specialize in the Text and TextInput components. I currently have 58 facebook/react-native PRs.

If you still experience this issue, I will prepare a patched release with the fix.

Thanks a lot

[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