onChange not firing properly in React 15 + IE11 when clearing input with X button or rightclick -> Delete

[soulostar]

The onChange event for inputs does not seem to be working correctly in React 15 when using the clear (X) button provided by IE (I'm using IE11). Clicking the clear button does not fire an immediate onChange at the time of click; rather, it seems that it "queues" an onChange that fires the next time text is entered, effectively rapid-firing two onChanges in succession. This becomes a problem when using a component that maps its state to two (or more, probably) inputs' values.

I made two fiddles with different versions of React and ReactDOM.
React 15 fiddle (buggy): https://jsfiddle.net/yde4wgaa/3/
React 0.14 fiddle (working): https://jsfiddle.net/f0tv528v/1/

In the React 15 fiddle, you can reproduce in IE11 by:

1. typing a value into the left input box
2. typing another value into the right input box
3. clicking the X button to clear the right input box
4. typing whatever in the left input box

You should see that the right input box reverts to its value before you clicked X. You can also see this happening if, instead of clicking X to clear the right input, you highlight the input text, right click, and click 'Delete'. Both the X button and right-click -> delete cases work fine with React 0.14 (tested both fiddles with the exact same browser and code).

[gaearon]

@jquense, any ideas?

[jimfb]

Ping @jquense

[jquense]

same as the others I think, fires an onInput/onChange but not a propertychange event which is what the polyfill is looking for.

seems ie11 was serious about distancing itself from vendor features... can't believe I'm complaining about that :P should be fixed in master...still saying we could put that in 15 if we wanted...

[dgreisen-cfpb]

This is a big bug for us. Do you know when this fix will be released? Need to decide whether to revert to 0.14. Thanks.

[shaned24]

To get around this issue for the time being I created a stateless component to use onInput instead of onChange for IE 11.

import React from 'react';
const attributeName = SomeDep.IsIE ? 'onInput' : 'onChange';

export const MyInput = ({ onChange, ...props }) => {
   props[attributeName] = onChange;
   return <input {...props}/>;
}

[scrooby]

Is there any update on when we can expect this fix to be released?

[petermikitsh]

As a stopgap, I am hiding the clear input X's:

<style type='text/css' dangerouslySetInnerHTML={{__html: '::-ms-clear {display: none;}'}} />

[flarnie]

This should be fixed in v15.6.0, which we released today.