Change event fires extra times before IME composition ends

Extra details

• Similar discussion with extra details and reproducing analysis: https://github.com/facebook/react/issues/8683
• Previous attempt to fix it: https://github.com/facebook/react/pull/8438 (includes some unit tests, but sufficient to be confident in the fix)

---

Original Issue

When I was trying this example from https://facebook.github.io/react/blog/2013/11/05/thinking-in-react.html, any Chinese characters inputted by Chinese pinyin input method would fire too many renders like:

Actually I would expect those not to fire before I confirm the Chinese character.

Then I tried another kind of input method - wubi input method, I got this:

It’s weird too. So I did a test in jQuery:

Only after I press the space bar to confirm the character, the keyup event would fire.

I know it might be different between the implementation of jQuery keyup and react onChange , but I would expect the way how jQuery keyup handles Chinese characters instead of react’s onChange.

[zhaoyao91]

Hello, Facebook guys, in fact this issue causes a SERIOUS problem: we can’t update input asynchronously with Chinese input. For example, we can’t use meteor reactive datasources or stores like redux, because they all feedback update asynchronously. Here is a simplest example to show this problem, it use setTimeout to do async update: https://jsfiddle.net/liyatang/bq6oss6z/1/

I really hope you can fix this quickly, so that we won’t waste efforts to workaround it here and there and over and over again.

Thanks.

Here is my workaround. If anyone face the same problem, you can have a look

[eyesofkids]

There is a tricky solution for Chrome v53. To call the handlechange after compositionend is fired.

handleComposition  = (event) => {

    if(event.type === 'compositionend'){
      onComposition = false

      //fire change method to update for Chrome v53
      this.handleChange(event)

    } else{
      onComposition = true
    }
  }

check the demo here: https://jsfiddle.net/eyesofkids/dcxvas28/11/