State update breaks CJK language input mode in single-line TextInput, after iOS 15

[kmsbernard]

Description

This is a somewhat historic issue which has been reported several times. There were also PRs to fit it.

• ReactNative's state update via this.setState breaks text input mode for Korean, Chinese, Japanese characters in 0.54 and 0.55 #19339
• TextInput broken for Korean in ReactNative 0.54 and 0.55 #19313
• [iOS][TextInput] Avoid using -[UITextView setAttributedString:] while user is typing #19809
• [iOS][TextInput] Apply the fix for CJK languages on single-line text fields. #22546

It seems that there was some internal behavior changes in UIKit TextField after iOS 15, and setSelectedTextRange call breaks input mode of CJK languages.

react-native/Libraries/Text/TextInput/RCTBaseTextInputView.m

Lines 152 to 165 in c8b83d4

	if (selection.empty) {
	// Maintaining a cursor position relative to the end of the old text.
	NSInteger offsetStart =
	[self.backedTextInputView offsetFromPosition:self.backedTextInputView.beginningOfDocument
	toPosition:selection.start];
	NSInteger offsetFromEnd = oldTextLength - offsetStart;
	NSInteger newOffset = attributedText.string.length - offsetFromEnd;
	UITextPosition *position =
	[self.backedTextInputView positionFromPosition:self.backedTextInputView.beginningOfDocument
	offset:newOffset];
	[self.backedTextInputView setSelectedTextRange:[self.backedTextInputView textRangeFromPosition:position toPosition:position]
	notifyDelegate:YES];
	}

I'm now trying to resolve this issue, but it is hard to find a safe workaround. Any suggestions or ideas would be appreciated.

Version

0.65.1

Output of react-native info

System:
    OS: macOS 12.0.1
    CPU: (8) x64 Apple M1
    Memory: 23.47 MB / 8.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.18.1 - /var/folders/hq/9ypzt1l953g6f38wmksf9zqm0000gn/T/yarn--1635561018227-0.1440883449375101/node
    Yarn: 1.22.10 - /var/folders/hq/9ypzt1l953g6f38wmksf9zqm0000gn/T/yarn--1635561018227-0.1440883449375101/yarn
    npm: 6.14.15 - ~/.nvm/versions/node/v14.18.1/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.11.2 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 21.0.1, iOS 15.0, macOS 12.0, tvOS 15.0, watchOS 8.0
    Android SDK: Not Found
  IDEs:
    Android Studio: 2020.3 AI-203.7717.56.2031.7621141
    Xcode: 13.1/13A1030d - /usr/bin/xcodebuild
  Languages:
    Java: 16.0.1 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 17.0.2 => 17.0.1 
    react-native: 0.65.1 => 0.64.2 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Steps to reproduce

Type some Korean characters in TextInput in iOS 15, such as "하늘". Then move the cursor to the beginning of the text, and then type any text. Let's say I typed "파란" (characters ㅍ,ㅏ,ㄹ,ㅏ,ㄴ) this time. The expected text is "파란하늘" However, the actual result is "ㅍㅏㄹㅏㄴ하늘"

Snack, code example, screenshot, or link to a repository

• This reproduction video referred from [iOS][TextInput] Avoid using -[UITextView setAttributedString:] while user is typing #19809

[github-actions]

⚠️	Missing Environment Information
ℹ️	Your issue may be missing information about your development environment. You can obtain the missing information by running react-native info in a console.

[kmsbernard]

For any others suffer with this issue, here is the patch-package file from the PR #32523: https://gist.github.com/bernard-kms/8f6bb978b3609b7f140467d59074a0fc