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

[hitochan777]

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.

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.

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]

Thanks for reporting this and same issue for Chinese as well

[nielinjie]

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]

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 facebook/react#3926 . In the comments there are some workarounds that may be applicable here.