search

lovasoa / react-contenteditable

React component for a div with editable contents
http://npmjs.com/package/react-contenteditable
Apache License 2.0
1.6k stars 218 forks source link

Japanese input does not work properly when a function is passed to innerRef #176

Open hitochan777 opened 4 years ago

hitochan777 commented 4 years ago

Overview

When a function is passed as innerRef, typing Japanese text (and probably other texts that require text conversion) does not work properly.

Detail

The animation below is the expected behavior. Japanese uses several kinds of characters (hiragana, katakana, and kanji; kanji is basically Chinese character). When we want to type Kanji we first type hiragana and then convert it to kanji from the list of possible candidates. The animation below is working example. As I type hiragana I see a box appears which shows the list of candidate conversions to kanji. japanes_input_working

But when a function is passed as innerRef, the conversion box does not appear and the characters are automatically converted to the sequence of alphabets and hiragana, as you can see in the animation below. japanese_input_strange

Reproducing the problem

Reproducing code is available from here.

Possible solution

I found that removing props.innerRef !== nextProps.innerRef part in componentShouldUpdate solves this problem. But I am pretty sure this line is there because it is needed, so I doubt removing this line is the correct measure.

18601673727 commented 4 years ago

Thanks for reporting this and same issue for Chinese as well

nielinjie commented 4 years ago

I got the same issue for Chinese inputting. And I just removed props.innerRef !== nextProps.innerRef line in componentShouldUpdate. So far, in my project, everything work fine. I think the reason is innerRef prop was not be changed to fire component to update. I will go back to add comments if anything is broken. FYI.

noe commented 3 years ago

For me, the workaround (i.e. removing props.innerRef !== nextProps.innerRef from componentShouldUpdate) does not work for Chinese input.

I think this issue is related to https://github.com/facebook/react/issues/3926 . In the comments there are some workarounds that may be applicable here.