Focus trap requires two clicks when focus is on EuiSelect

[ashikmeerankutty]

Summary

Possible Fix for #3172

This issue was due to stopImmediatePropagation that prevents any parent handlers and also any other handlers from executing. So the closePopover was not executed. The possible fix was to use stopPropogation instead of stopImmediatePropagation so that only the parent handlers are prevented.
This fixes the issue in firefox and chrome but doesn't fix the issue in safari. This behavior is better than the current behavior.

• Check against all themes for compatibility in both light and dark modes
• Checked in mobile
• Checked in IE11 and Firefox
  - [ ] Props have proper autodocs
  - [ ] Added documentation examples
  - [ ] Added or updated jest tests
• Checked for breaking changes and labeled appropriately
  - [ ] Checked for accessibility including keyboard-only and screenreader modes
• A changelog entry exists and is marked appropriately

[kibanamachine]

Since this is a community submitted pull request, a Jenkins build has not been kicked off automatically. Can an Elastic organization member please verify the contents of this patch and then kick off a build manually?

[thompsongl]

jenkins test this

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_3190/

[thompsongl]

Seems like this change will work.
The original reason for preventing propagation was that state updates that triggered rerenders could effectively reset/clear input value changes.
Preventing parent-only propagation would theoretically be enough, but I'll do some more testing to verify

[thompsongl]

Went back to the source (#1926):

The result of this is consistent eventing across supported browsers, but prevents clicks on EuiSelect from triggering EuiOutsideClickDetector behavior (Note, this happens in Safari regardless of this PR)

So, at the time, it was known that we'd find ourselves in this position.

Unfortunately, I did not happen to write comments for why stopImmediatePropagation was used instead of stopPropogation. Any thoughts on the proposed approach, @chandlerprall?

[chandlerprall]

Unfortunately, using stopPropagation re-introduces the bug described by #1881

[thompsongl]

Ah, you are correct. I had tested in Chrome yesterday 😞

@ashikmeerankutty if you replace the export in src-docs/src/views/outside_click_detector/outside_click_detector.js with the code below, you'll see these changes highlight the discrepancy in browser behavior and reintroduce the (more critical) bug described in #1881.

export default class extends Component {
  options = [
    { value: 'option_one', text: 'Option one' },
    { value: 'option_two', text: 'Option two' },
    { value: 'option_three', text: 'Option three' },
  ];
  state = { val: this.options[1].value, otherKey: 0 };
  onChange = e => {
    this.setState({
      val: e.target.value,
    });
  };
  render() {
    return (
      <div>
        <EuiOutsideClickDetector
          onOutsideClick={() => {
            this.setState({ otherKey: this.state.otherKey + 1 });
          }}>
          <h1>Counter {this.state.otherKey}</h1>
        </EuiOutsideClickDetector>
        <EuiSelect
          options={this.options}
          value={this.state.val}
          onChange={this.onChange}
        />
      </div>
    );
  }

[ashikmeerankutty]

@thompsongl Thanks for the review. I had a strong feeling that my change will break something. I will check if some other fix exists.