<p dir="auto"><strong>Do you want to request a <em>feature</em> or report a <em>bug</em>?</strong></p>
<p dir="auto">both.</p>
<p dir="auto"><strong>What is the current behavior?</strong></p>
<p dir="auto">There is a existed issue <a href="https://github.com/facebook/react/issues/3926" data-hovercard-type="issue" data-hovercard-url="/facebook/react/issues/3926/hovercard">#3926</a> but it is just one of the problems in some kind of browsers.</p>
<p dir="auto">I have uploaded the detail, demo files, test results and temporary solution in <a href="https://github.com/eyesofkids/react-compositionevent">react-compositionevent</a></p>
<p dir="auto">The main problem is when users type these words from IME(Chinese, Japanese or maybe Korean) and do something like search the database or filter out from some data, sometimes these functions will be unworkable. For example, if users type "ni" during the composition session, maybe it will be one of "你尼泥腻" in Chinese or one of "にニ尼煮" in Japanese. But in this moment, the <code class="notranslate">change</code> event also be fired. If the search or filter functions of the application are designed to be invoked when <code class="notranslate">change</code> event occured, there maybe something wrong logically. These functions should be invoked after users finished the composition session.</p>
<p dir="auto">In React, there are three synthetic events - <code class="notranslate">onCompositionEnd</code>, <code class="notranslate">onCompositionStart</code> and <code class="notranslate">onCompositionUpdate</code>. If the input components(<code class="notranslate">&lt;input...&gt;</code> and <code class="notranslate">&lt;textarea.../&gt;</code>) are "uncontrolled", we can use them to help <code class="notranslate">onChange</code> to capture the text correctly. The only different point is Google Chrome change its events sequence after v53. Check <a href="https://github.com/eyesofkids/react-compositionevent/blob/master/uncontrolled/Cinput.js">Cinput.js</a> and <a href="https://github.com/eyesofkids/react-compositionevent/blob/master/uncontrolled/Ctextarea.js">Ctextarea.js</a> files.</p>
<p dir="auto">But if these input components are "controlled", it will be hard to solve the problem.</p>
<p dir="auto">Because these the <code class="notranslate">value</code> of a controlled component is came from <code class="notranslate">state</code>. We can't modify <code class="notranslate">state</code> directly and the only way to update state is using <code class="notranslate">this.setState()</code> to schedule update. But <code class="notranslate">this.setState()</code> may be asynchronous.</p>
<p dir="auto">After test, i found different OS/browsers could have different results. I have written some code to solve it. But i thought it isn't a good solution. It uses the browser detection and two properties of the <code class="notranslate">state</code> object. One is for input, another is for internal functions(search, filter...etc). It can't just use one property of the <code class="notranslate">state</code> object because i can't stop any <code class="notranslate">change</code> events, state need it to update the value of the input element. If i stop some change events during composition session, i would get nothing after typing these words from IME.</p>
<p dir="auto"><strong>If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via <a href="https://jsfiddle.net" rel="nofollow">https://jsfiddle.net</a> or similar (template: <a href="https://jsfiddle.net/reactjs/69z2wepo/" rel="nofollow">https://jsfiddle.net/reactjs/69z2wepo/</a>).</strong></p>
<p dir="auto">You can use online test demo: <a href="https://eyesofkids.github.io/" rel="nofollow">https://eyesofkids.github.io/</a><br>
or use a normal input component(controlled/uncontrolled) to test.</p>
<p dir="auto"><strong>What is the expected behavior?</strong></p>
<p dir="auto">The input(and textarea) controlled components in React should ensure these fired "change" and "composition" events is consistent in different browsers. I found there are 3 different results(events fired sequence) at least.</p>
<p dir="auto"><strong>Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?</strong></p>
<ul dir="auto">
<li>React 15.4.1</li>
<li>browsers: chrome, firefox, safari, opera, ie, edge</li>
<li>OS: macOS, win7, win10</li>
</ul>
<h3 dir="auto">Extra details</h3>
<ul dir="auto">
<li>Similar discussion with extra details and reproducing analysis: <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="198768260" data-permission-text="Title is private" data-url="https://github.com/facebook/react/issues/8683" data-hovercard-type="issue" data-hovercard-url="/facebook/react/issues/8683/hovercard" href="https://github.com/facebook/react/issues/8683">#8683</a></li>
<li>Previous attempt to fix it: <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="192005241" data-permission-text="Title is private" data-url="https://github.com/facebook/react/issues/8438" data-hovercard-type="pull_request" data-hovercard-url="/facebook/react/pull/8438/hovercard" href="https://github.com/facebook/react/pull/8438">#8438</a> (includes some unit tests, but sufficient to be confident in the fix)</li>
</ul>
<hr>
<h3 dir="auto">Original Issue</h3>
<p dir="auto">When I was trying this <a href="https://jsfiddle.net/reactjs/n47gckhr/light/" rel="nofollow">example</a> from <a href="https://facebook.github.io/react/blog/2013/11/05/thinking-in-react.html" rel="nofollow">https://facebook.github.io/react/blog/2013/11/05/thinking-in-react.html</a>, any Chinese characters inputted by Chinese pinyin input method would fire too many renders like:</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://cloud.githubusercontent.com/assets/1091472/7742565/2c8625b0-ffc3-11e4-8ac2-d7eb22a3aef3.png"><img src="https://cloud.githubusercontent.com/assets/1091472/7742565/2c8625b0-ffc3-11e4-8ac2-d7eb22a3aef3.png" alt="screen shot 2015-05-21 at 14 04 36" style="max-width: 100%;"></a></p>
<p dir="auto">Actually I would expect those not to fire before I confirm the Chinese character.</p>
<p dir="auto">Then I tried another kind of input method - wubi input method, I got this:</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://cloud.githubusercontent.com/assets/1091472/7742657/42c27bac-ffc4-11e4-8a3a-7d4550e88a59.png"><img src="https://cloud.githubusercontent.com/assets/1091472/7742657/42c27bac-ffc4-11e4-8a3a-7d4550e88a59.png" alt="screen shot 2015-05-21 at 14 17 15" style="max-width: 100%;"></a></p>
<p dir="auto">It's weird too. So I did a test <a href="http://jsbin.com/yepogahobo/1/edit?html,js,console,output" rel="nofollow">in jQuery</a>:</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://cloud.githubusercontent.com/assets/1091472/7742591/71da6842-ffc3-11e4-9d7a-a8438721029c.png"><img src="https://cloud.githubusercontent.com/assets/1091472/7742591/71da6842-ffc3-11e4-9d7a-a8438721029c.png" alt="screen shot 2015-05-21 at 14 05 12" style="max-width: 100%;"></a></p>
<p dir="auto">Only after I press the space bar to confirm the character, the <code class="notranslate">keyup</code> event would fire.</p>
<p dir="auto">I know it might be different between the implementation of jQuery <code class="notranslate">keyup</code> and react <code class="notranslate">onChange</code> , but I would expect the way how jQuery <code class="notranslate">keyup</code> handles Chinese characters instead of react's <code class="notranslate">onChange</code>.</p>