[Android] Fix issue#11068 of duplicating characters when replacing letters to lowercase or uppercase in TextInput (Adjusted)

[fknives]

Summary:

These changes are intended to resolve #11068.
This pull request is an adjustment to #35929 which had issues with it's implementation and had to be reverted. (commit: c1eec4c)

Changelog:

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

Test Plan:

I have added an example to the TextInputSharedExamples.js which can demonstration the fix.

Here is a short video showing the following:

• No duplicate characters
• Characters are updated to be lowercase
• Long pressing delete properly deletes, doesn’t stop after deleting one character
• Suggestions (selected from keyboard) work and are updated to lowercase when it becomes part of the input text
• Moving the cursor and typing works, cursor position is kept as it should
• Moving the cursor and deleting works
• Selection portion and deleting it works, cursor position is kept as it should

short3.mov

Note: I have tested with latest main, 0.72.3, commit before mine: 3c6dbec
Note2: I have tested on Emulator where I can reproduce the original issue. On real device (Samsung A52s 5G) I could reproduce it using Samsung Keyboard, I could not reproduce it on the same device with Gboard.

Here is a longer version which goes through the TextInput examples: typing, clearing, selection, cut, paste etc.
So to ensure this indeed does not cause the same issues as #35929 did.
Uploaded to youtube, because it was too big: https://youtu.be/5IEzXYpfa7w

Possible Future Improvements

As it can be seen the video, the letter duplication is resolved, however since the lowercase modification happens on the Javascript side, it takes a couple milliseconds and the Uppercase can still be shown momentarily while typing.

Technical details, why the solution works

I've debugged a simple AppCompatEditText with calling the same getText().replace in doAfterTextChanged with a bit of delay and noticed a difference to the ReactEditText.

The ReactEditText removes the android.view.inputmethod.ComposingText Span in manageSpans before calling replace (ComposingText is Spanned.SPAN_EXCLUSIVE_EXCLUSIVE).
That ComposingText Span is used in android.view.inputmethod.BaseInputConnection private replaceText to find from what point the text should be replaced from when applying suggestions or typing new letters. Without that Span, it defaults to the selection position, which is usually the end of the text causing duplication of the old "word".

In simple terms, while typing with suggestions on the keyboard, each new letter is handled similarly as clicking a suggestion would be, aka replacing the current "word" with the new "word". (let's say "Ar" word with "Are" word)

Another way to describe it:
While typing with suggestions, with the ComposingText Span the TextView keeps track of what word completions are suggested for on the keyboard UI. When receiving a new letter input, it replaces the current "word" with a new "word", and without the Span, it replaces nothing at the end (selection point) with the new word which results in character duplication.

It also seems to make sense then why without suggestions (like password-visible and secureTextEntry) the issue hasn't occurred.

Examples

How the issue happened:

• User types: A (ComposingText Span becomes (0,1), composingWord: "A")
• Javascript replaced A with a, ComposingText Span was removed from getText()
• User types a new character: r (ComposingText, defaulting to selection, from selection, empty string is replaced with word "Ar")
  => Complete text: aAr => letter duplication.

How it works with the changes applied:

• User types: A (ComposingText Span becomes (0,1), composingWord: "A")
• Javascript replaces A with a, (ComposingText Span (0,1) is re-set after replace)
• User types a new character: r (ComposingText (0,1), "a" word is replaced with word "Ar". ComposingText becomes (0,2) "Ar")
• Javascript replaced Ar with ar, (ComposingText Span (0,2) is re-set after replace)
  => Complete text: ar => no letter duplication
• User selects suggestion "Are" (ComposingText Span (0,2) "ar" is replaced with new word and space "Are ")
• CompleteText: "Are "
• Javascript replaces "Are " with "are " (ComposingText Span doesn't exist, no string after space " ")

Note: the Editable.replace also removes the ComposingText, if it doesn't cover the whole text, that's why we need to re-setSpan them even if we wouldn't remove them in manageSpans.

[analysis-bot]

Platform	Engine	Arch	Size (bytes)	Diff
android	hermes	arm64-v8a	17,649,282	+112
android	hermes	armeabi-v7a	n/a	--
android	hermes	x86	n/a	--
android	hermes	x86_64	n/a	--
android	jsc	arm64-v8a	21,026,750	+41
android	jsc	armeabi-v7a	n/a	--
android	jsc	x86	n/a	--
android	jsc	x86_64	n/a	--

Base commit: 0239776
Branch: main

[lunaleaps]

Is it possible to put this fix behind a flag? You can use ReactFeatureFlag and create a new flag. I can hook it up to our fb infra to test out and of course every React Native app can override these feature flags.

That way, I can roll out the fix and if it regresses, simply turn off the feature flag vs. needing to revert etc.

Edit: also thanks @fknives for the re-attempt!

[lunaleaps]

See comment around flagging this

[fknives]

@lunaleaps I think Feature Flagging makes sense, I've added the new Flag by default enabled.
Modified my changes to happen only if the new flag is true.

I hope I understood correctly and that's what you meant.

Thank you!

Note: Also had to rebase, because the ReactFeatureFlags.java has been modified since the PR was initially opened.

[fknives]

^ rebase to resolve conflicts

[fknives]

^ rebased to resolve conflicts within ReactFeatureFlags.java

Ran rn-tester again, attached video still applies.

[fknives]

^ rebased to resolve conflicts within ReactFeatureFlags.java

[github-actions]

This PR 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 PR was closed because it has been stalled for 7 days with no activity.