Upgrading from React 14 to 15 breaks IE11 autofill behavior with controlled inputs

[jimbolla]

I have a sign in form with controlled inputs that works fine using React 14. When I upgrade to React 15, autofill behavior in IE11 no longer triggers onChange. Strangely, if I change document mode from "Edge (Default)" to "10" React 15 still behaves as expected.

Reading the changelog for R15, this change sounds like it could be related:

Input events are handled more reliably in IE 10 and IE 11; spurious events no longer fire when using a placeholder.
@jquense in #4051

[jimbolla]

Here's a gist to repro the bug

Steps:

1. Download .zip and extract
2. npm install
3. node_modules\.bin\webpack
4. node server.js
5. Open IE11, goto http://localhost:8081/test.html
6. Enter any username and password and submit the form. (Notice how the state gets updated while typing.)
7. Click "Yes" to IE's "Would you like to store your password"
8. Reload the page ( CTRL+R )
9. Double-click the username textbox and select the username your entered. Notice the state does NOT get updated as expected.

This is currently blocking us from upgrading to React 15, as most of our users are on IE11 and expect autofill to work.

[jquense]

I am not sure how the change would affect this. It only keeps changes for the same value from firing more than once. Does IE not fire a native onChange event here? If if does and the value is different it should work. I am wondering if this is still present in master with #5746 which changes the strategy a bit.

[jimbolla]

IE does not fire onChange on autofill. Supposedly, Safari has similar issues. There's some details in #1159

[jquense]

does it fire onInput? how can we know when it happens?

[jimbolla]

I'm not sure. It works in React 0.14.8, but not 15.0.1. So something changed in that release that broke IE. Based on the changelog, #4051 seems to be the likely culprit.

[jquense]

seems like the different then is that IE10 fires onChange for autofill whereas IE11 does not :/

[arendjr]

@jimfb: Could it be this issue is also related to #6406?

[jimfb]

@arendjr No, I don't think so. #6406 has nothing to do with events.

[arendjr]

Okay thanks, then I'll try to dig a bit deeper to see if I can track this down.

[arendjr]

Okay, can confirm that by reverting #4051 auto-fill issues get fixed for me in IE11.

But that PR was merged to resolve #3826... so what would be the proper way forward here?

[jimfb]

@arendjr Presumably autofill fires some sort of DOM event. When that event fires with the new value, we should fire an onChange event. So the proper path forward is to figure out which event we should be listening to, and add the logic to ensure an onChange fires.