React: event.target.selectedOptions IE Bug

[travisbloom]

Currently the synthetic event fired from select element's onChange prop has no selectedOptions property in IE11 (most likely earlier versions as well). event.nativeEvent.srcElement.value appears to work in all browsers.

This works in Chrome:

event.target.selectedOptions[0].value. 

In IE:

event.target.selectedOptions === undefined;

Can this be polyfilled to be consistent across browsers or is the assumption developers should use event.nativeEvent.srcElement.value?

[jimfb]

I don't think we have a synthetic wrapper for the target; it's the real DOM node, right? I'm surprised that event.nativeEvent.srcElement behaves differently, unless they are pointing to different elements. Do you have a jsfiddle?

[jimfb]

cc @spicyj @syranide Why do we not provide event.srcElement on synthetic events?

[sophiebits]

.target should probably match .nativeEvent.srcElement always. If it doesn't that sounds like a bug. We should not support .srcElement on synthetic events – it is an IE-ism.

[jimfb]

@spicyj ic, it's an IE-ism that also works in Chrome, which is what threw me off.

@travisbloom can you provide a jsfiddle that demonstrates?

[travisbloom]

@jimfb I'm not at work right now so I can't check on my Windows testing laptop but the third console.log should return undefined on IE11 when you select an option https://jsfiddle.net/travisbloom/g4egL2y3/

[jimfb]

Ok, I ran the fiddle in IE11. Best as I can tell, event.nativeEvent.srcElement === event.target, and is the DOM node. It looks like IE11 no longer supports selectedOptions on the select DOM node, which is odd because it appears to be supported by Edge, but that's life. selectedOptions is not part of the spec, and even if it were, I don't think we'd want to be polyfilling the actual dom nodes.

Anyway, I think this has nothing to do with our synthetic events. The "problem" is occurring when the browser reads directly from a DOM node. Unless I'm missing something, no further action is necessary here.

[sophiebits]

(Sounds like you want event.target.value.)