TextInput broken for Korean in ReactNative 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.1
react-native: ^0.55.4 => 0.55.4

Steps to Reproduce

In TextInput, just type some Korean characters, such as "오후의 홍차". Then move the cursor to the space between "오후의" and "홍차", and then type some more Korean characters, such as "맛있는"

Expected Behavior

The text should be input like "오후의 맛있는 홍차"

Actual Behavior

However, as of RN version 0.54 and 0.55, the text is input like "오후의 ㅁㅏㅇㅣㅆㄴㅡㄴ 홍차"

Specifically, Korean characters are combined correctly when the cursor is at the end of text in TextInput, but if the cursor is placed at any position other than the end, Korean characters are not combined correctly.

[daesan]

@shergin Do you mind looking at this issue? I've looked through the refactored codes for TextInput module in RN 0.54.0 and found that _onChange event in RCTBaseTextInputView.textInputDidChange breaks Korean IM input status.

This causes Korean characters to be typed like "ㅇㅏㄴㄴㅕㅇ" instead of "안녕". (Each part of character is input separately. They should be combined to form a complete character.)

[rodolphefauquez]

Maybe i'm wrong, but looks similar to this issue:
#18456
I have the same problem with japanese, i'm not able to write kanjis.

[daesan]

@rodolphefauquez It is a related issue. However, PR #18456 doesn't solve the Hangul input issue.

[daesan]

@shergin I did some more experimentation with this issue. It seems that the problem does not to lie with new TextInput implementation but rather with React Native's setState() call + view re-rendering cycle. (I guess the implementation behind this has changed in RN 0.54.0 as well.)

If I delete onChange/onChangeText callback from tag in jsx file, Hangul input issue disappears. But I do need onChange callback. If someone who is more familiar with RN 0.54 update details can suggest where this issue might be stemming from, it would be very much appreciated.

[benevbright]

This is the very critical issue for Korean user.

[JJMoon]

This might cure it. It might happen when typing Japanese Hanja, Chinese. But, so far I have not confronted when I type Korean. Weird. I'm Korean, so I use it very much.

#18456 (comment)

[hyochan]

The quick fix is not to setState in onChangeText and rather set this to private variable inside component which won't affect the render system. The default TextInput will show the output of the text when typing.

example

private searchTxt: string = '';
...
<TextInput
    onChangeText={(text) => this.searchTxt = text;}
    underlineColorAndroid='transparent' // android fix
    multiline={false}
    style={styles.inputSearch}
    onSubmitEditing={this.onSearch}
    defaultValue={this.searchTxt}
/>

Note: Above is just the workaround in ios. In android it won't work because text in TextInput is always changed when setState.

[ycai2]

Think this might be caused by the same root problem discussed in #18874. Please check out their discussions.

[rarira]

still happens in RN 0.57

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as "For Discussion" or "Good first issue" and I will leave it open. Thank you for your contributions.