<select>'s onChange event fires with incorrect selectedIndex, value

[martinsb]

Do you want to request a feature or report a bug?
Report a bug.

What is the current behavior?
<select> element's onChange event is fired with incorrect selectedIndex and value, like it hasn't actually changed. This happens only if the element has been rendered under another React DOM root, see the example in the link below.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem
https://jsfiddle.net/martinsb/wd54vmmj/7/

What is the expected behavior?
onChange callback handlers should receive events with those values that user has actually selected. In the test case above, for example, when choosing "Two", I expect to have the following console output: Change event, selectedIndex: 1, value: 2

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
The bug is observed with react and react-dom packages version 16.0.0-beta.3. Latest stable version (15.6.1) works just fine.

[sophiebits]

cc @sebmarkbage this is your ReactControlledComponent stuff probably

[sebmarkbage]

This is such a great bug report btw. Thank you so much!

[sebmarkbage]

I think the workaround, like with any unstable_renderSubtreeIntoContainer problem, is to use a Portal instead.

https://jsfiddle.net/319ced5z/1/

I'll take a look to see if this is something we can fix without it but Portals is definitely the way to go for these use cases.