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.

https://github.com/facebook/react-native/blob/c8b83d4e0b33c2af45093f7b2262ee578ece2faf/Libraries/Text/TextInput/RCTBaseTextInputView.m#L152-L165

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