onChange not firing in React 15.1.0 + IE11 when paste text into text field

Question

On IE11/React 15.1.0 when copy/paste data to a text field using right click on mouse, onChange is not firing, this works fine in Chrome and Firefox.

To resolve this I am using onBlur along with onChange with the input field but somehow I know its not the right approach.

<input name="username" onChange={this.props.updateName} 
       onBlur={this.props.updateName} id="username" /> 

I found a similar discussion on Github but the fix was made in later versions 15.6.0 but I can't update the version of React as it might break the app.

Answer 1

Option 1:

Switch to React 15.6.2 (the last version of React 15.x), which doesn't have this problem on IE11; pasting via the mouse still triggers change:

ReactDOM.render(
  <div>
    <input
      text="text"
      onInput={() => {
        console.log("input");
      }}
      onChange={() => {
        console.log("change");
      }}
    />
  </div>,
  document.getElementById("root")
);

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.2/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.6.2/react-dom.min.js"></script>

Option 2:

Respond to input instead of or in addition to change. As we can see here, 15.1.0 doesn't fire an onChange handler when you paste via the mouse on IE11:

ReactDOM.render(
  <div>
    <input
      text="text"
      onInput={() => {
        console.log("input");
      }}
      onChange={() => {
        console.log("change");
      }}
    />
  </div>,
  document.getElementById("root")
);

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.1.0/react-dom.min.js"></script>

With the above, pasting with the mouse triggers only input on IE11.