[terra-form-select] Drop-down does not open on IE 11 after initial selection

[christinelang]

Bug Report

Description

Select field drop down in IE 11 requires two clicks to open after selecting an option.

Steps to Reproduce

1. Click on a terra select field in IE 11 to open the drop down
2. Select a drop down option
3. Click on the select field again
4. Drop down will not open unless clicked twice

Expected Behavior

Expected the drop down to open on first click.

Environment

• Component Name and Version: terra-select-field (this is able to be reproduced on the terra site)
• Browser Name and Version: IE 11

[nramamurth]

Here's the behavior I noticed that is strange on IE.

• Click on Select -> Dropdown opens -> Blur occurs -> document.activeElement is the list (#terra-select-menu) which means that this condition evaluates to true and all is good so far.
• Choose an option from the dropdown menu.
• Click on Select again -> Dropdown opens -> Blur occurs -> document.activeElement this time is not the list. It is instead the display div which means that this condition evaluates to false (does not return immediately) and proceeds to do the rest of what blur is supposed to do that includes closing the dropdown and changing the focus.

@StephenEsser @bjankord @dev-cprice

What does this inline comment mean? See line.

IE 11 sets document.activeElement to the next focused element before the blur event is called

Also, I have a draft PR out that seems to have fixed this issue based on the above comment and this is also something that I learned from facebook/react#3751 (comment).

Please feel free to chime in if I have to test other scenarios on other variants as well.