Combo box blows up when in a modal

[bevacqua]

Clicking options in the combo list results in an infinite loop, but strangely only when the combo is in a modal box

[chandlerprall]

Related to #1051 ; in this case the modal wraps its contents with a FocusTrap, and the combo box's option list renders through an EuiPortal outside the modal's div, and tries to focus the option list on click. The focus trap sees the focusing of an outside element and fights back.

[chandlerprall]

Full story:

React & FocusTrap have a focus event listener. When the combo box has an active element it sets focus to that option in its componentDidUpdate. The call to .focus() the element triggers its onFocus handler which gets scheduled through react's event batching. Then the FocusTrap handler executes, preventing the element from receiving focus (it's outside the modal trap, see above comment). When the scheduled batched event fires, it sees that the option is not selected and calls .focus() on it, triggering the whole cycle again.

[chandlerprall]

We can resolve this issue by refactoring EuiComboBox to retain focus instead of shifting it to the options list.