ReactNative's state update via this.setState breaks text input mode for Korean, Chinese, Japanese characters in 0.54 and 0.55

[daesan]

Environment

Environment:
OS: macOS High Sierra 10.13.4
Node: 6.11.0
Yarn: Not Found
npm: 3.10.10
Watchman: Not Found
Xcode: Xcode 9.3 Build version 9E145
Android Studio: 3.0 AI-171.4443003

Packages: (wanted => installed)
react: ^16.3.1 => 16.3.2
react-native: ^0.55.4 => 0.55.4

Steps to Reproduce

This issue has been reported number of times already. #19313 #18403 #19104 #19337 #12599 #18379 #18767 #18260

However, most of them reported the issue as being the TextInput bug whereas the real bug seems to lie with ReactNative's view re-rendering logic in iOS. This report is to unify them under a more proper title so that someone who is more likely to recognize the root cause of this issue can pay attention.

If there is a TextInput tag in jsx file and its onChange or onChangeText callback has this.setState() call, Korean, Chinese, Japanese characters (which have multi-stage character input mode) are not input correctly.

In caes of Hangul(Korean), if the cursor is at the end of the text, the input is handled properly. However, if the cursor is at the beginning or is in the middle of the text, the input character parts are not combined as they should be. The parts of a character that should form a single character are input separately by themselves.

To reproduce, just type some Korean characters in TextInput, such as "하늘". Then move the cursor to the beginning of the text, and then type any text. Let's say I typed "파란" this time.

Expected Behavior

The text should be input like "파란하늘" (meaning blue sky)

Actual Behavior

However, as of RN version 0.54 and 0.55, the text is input like "ㅍㅏㄹㅏㄴ하늘"

Chinese characters and Japanese kanji characters are input by first entering romanzi to specify the pronounciation and then the user select a character from a list of Chinese characters popup that appears. However, this popup does not appear at all, as demonstrated in #18403.

Korean, Chineses, Japanese characters input is handled by multi-state IM mode. However, setState => view re-rendering cycle of ReactNative in v0.54 and v0.55 seems to reset the "character input is in progress" IM mode, thus causing incomplete and/or no characters to be entered into TextInput field.

This is a rather serious issue for Korean, Chinese, Japanese developers who have no options but to stick with v0.53 or below. (0.53 is particularly unstable version so I am stuck using v0.52.3) If anyone can guess where this issue might be stemming from, please share your opinions. It would be very much appreciated. Thank you.

[daesan]

I forgot to mention that this is an iOS only issue.

[mandrigin]

@daesan can you reproduce this issue on react-native 0.56.0? I can't anymore...

[daesan]

@mandrigin Thank you for working on this issue! Unfortunately, I can reproduce the issue with both single-line TextInput and multi-line TextInput on RN 0.56.0...

[gcmsg]

Any updates on this issue? This only happens when you use iOS default input method, if you use third party input method, this problem will disappear.

[AndrewJack]

Does this commit fix it? 892212b

[rarira]

Does this commit fix it? 892212b
@AndrewJack

in RN 0.57 , Japanese solved but not Korean

[KouSyurei]

Also encountered such a problem, it is suggested that using onCompositionStart/Update/onCompositionStartEndURL

[mandrigin]

@rarira @KouSyurei We experienced this issue ourselves and I tried to workaround this issue for Korean (but only for the multi-line text fields).
Here is a PR for that: #19809
If that solves your issues, please ping me, then I can extend it to the single-line text fields too.

PS: it would be nice to receive any feedback on that PR, from the core contributors. It's a bit hacky, I know, and if there is a better way to fix it, I'd ❤️ to know that and I can commit to fix it. Being able to use a non-patched React Native version is worth it 🙂

[mandrigin]

Here is a fix for single-line text fields: #22546

[leiz-me]

Facing a similar issue when trying to put a <Text /> inside of <TextInput /> to get custom styles of text while typing.
Something like

<TextInput ...props>
  <Text style={styles.customTextStyle}>{this.state.textinput}<Text/>
</TextInput>.

While typing Chinese pinyin like haha("哈哈"), press h, then the input goes to h'aha', which the first h is turned to a simple alphabetical character.

[mandrigin]

@leiz-me can you check if you can reproduce this issue on this React-Native branch?
#22546

[leiz-me]

@mandrigin Will check it out. My project is based on 0.51, so I need some time.

[leiz-me]

@mandrigin Upgraded my project to RN 0.57.7 last night. And interesting thing is, on 0.57.7, the issue I described above is fixed. And I didn't touch the RN branch you mentioned yet.

I am not sure if the issue I got is related to your problem. Sorry if I am not helpful.

[mandrigin]

@leiz-me I'm glad that you don't have this issue. It should for sure be partially fixed in 0.57.7 (for multi-line text fields). Single line text fields might still be affected until #22546 is merged.

[rarira]

@mandrigin thanks for your effort, and after updating 0.57.8, there is no Korean multiline textinput issue!.. 0.57.7 still had the problem. Thanks!

[mandrigin]

@rarira great to hear! I hope the fix for single-line text fields will land soon too!