Investigate IE/Edge select rendering bug

[nhunzaker]

This is a follow up from an issue related to change events on selects in IE/Edge (#4672). It looks like this is no longer an issue, but there's a visual regression on IE/Edge that might be avoidable.

Reproduction

https://codepen.io/nhunzaker/pen/qybxmz

Observation

From @jasonwilliams (#4672 (comment)):

change and MouseUp both fire for me in Microsoft Edge 42.17134.1.0 @nhunzaker
Although, the rendering of the select box is weird, it doesn't appear to expand when i click on it

We need to:

• Capture a GIF of the behavior for documentation purposes (this can just live in this thread)
• Reproduce the test case outside of React, so that we can isolate the mechanics involved
• Fix it :)

[aseem191]

So I attempted to run your example, and I changed the setState of handleMouseUp to change the title to a constant as so:

this.setState({title: "Title"});

and the select box expanded successfully in Edge 42.17134.1.0, but only after the first attempt. The problem here appears to be with Math.random() to an extent, but not sure why.

[SubVersive]

The issue is still reproducing in IE 11. I attached a gif file. There couple comments in addition:

1. In IE select is not usable with a mouse - it is closing onMouseUp event immediately.
2. The only way to move mouse to another item is to hold mouse button without releasing it.
3. Looks like there is different order of events in IE11 and chrome. If I remove state change (select become usable in IE) in console I see following order:
   Chrome: onChange -> onMouseUp
   IE11: onMouseUp -> onChange

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contribution.

[stale]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!

[frawa]

The same sample, https://codepen.io/nhunzaker/pen/qybxmz,
misbehaves with Firefox 88.0.1.
It is impossible to change the selected option.

Things work as expected using Chrome.

Here is an example using hooks: https://codepen.io/frawa/pen/VwpPaVg