Possible incorrect event.target on number inputs in IE9?

[nhunzaker]

Since React 16.0.0, it looks like there might be a case where event.target on a change event in IE9 reports as the window, but I can't reproduce it outside of the DOM test fixtures.

Steps to reproduce

1. Open this build of the fixtures: http://react-ie-9-target-issues.surge.sh in IE9
2. Enter text into an input
3. Observe that the event.target.value is the window, as recorded by the fixture

I can not reproduce this using the following CodePen:

https://codepen.io/nhunzaker/pen/dmeoxJ?editors=1010
Viewable in IE9 here: https://s.codepen.io/nhunzaker/debug/dmeoxJ/PNrvYLevqQbM

Here's a diff of my changes with master:
master...nhunzaker:ie9-target-issue

Any idea what's going on? Here's what I think I need to check next:

• Differences in rAF polyfill
• Differences in map/set polyfill

This list will probably grow

[SuperOleg39]

Hello!

Have the same issue in React 16.3.0 on IE9 (16.2.0 work correctly).

Several libraries (react-autosuggest and react-input-mask) try to use event.target.value inside onChange handler, and get undefined (and don't check the value type). And all string methods break down.

event.target is Window.

[SuperOleg39]

Reproduce in jsbin (opens in ie9) http://jsbin.com/loqeqatuti/1/edit

[nhunzaker]

@SuperOleg39 Thanks! It's very helpful to have a secondary confirmation.

Now what to do... I'll take some time to dig into what might be happening in the event system, however I probably won't be able to get to this until later this week if anyone wants to do some research as well!

[asolove-stripe]

Stripe is also seeing this bug when upgrading our Elements codebase to react 16.3.2.

Two small notes that I learned when debugging the jsbin above to check that it matched our problem:

• The issue also occurs in IE11 in IE9 document mode, which slightly reduces the set of possible causes.
• JSBin has a bug in IE9 where the html panel doesn't load the saved content. To test on IE9, I had to open the JSBin in another browser and copy/paste the html content from there.

When debugging a bit further, I found that when the event handler is called in IE9:

• e.target is window
• e.currentTarget is the expect input element
• e.nativeEvent.target is undefined

Adding an event handler to the same node through the raw DOM API, the browser-native event has the expected value on e.target.

[LeadingLight]

It is this commit that causes the issue.

fe10b8d

Just changing this line in the source makes it work again.

let target = nativeEvent.target || nativeEvent.srcElement || window;

Trying to find ways around it...

[terminatorheart]

the same issue, thanks to @SuperOleg39 and @LeadingLight , downgrade to react@16.2.0 is ok.

[kiran-r28]

Just an additional observation if it might help,

event.target for onChange returns [Window] for any character typed in an input field whereas deleting the character (backspace or delete) returns [HTMLInputElement].

event.target for onKeyUp returns [HTMLInputElement].

[gaearon]

Fixed in React 16.4.1.