Mousedown event on option didn't stop native propagation

Recently I met a issue, that when I using react-select on a popover, popover will be closed immediately when I click on the dropdown to select.

And I figured out it is because of the following source code:

{
  key: 'handleMouseDown',
  value: function handleMouseDown(event) {
    event.preventDefault();
    event.stopPropagation();
    this.props.onSelect(this.props.option, event);
  }
}

This can’t stop the event bind on document by addeventlistener, because React is using synthetic event.

event.nativeEvent.stopImmediatePropagation();

If you can add this to line, this issue could be solved perfect.

[cjhowald]

I ran into this as well. Until the fix lands, a simple workaround is to wrap the Select and swallow the event.

<div onClick={e => e.stopPropagation()}>
    <Select/>
</div>

[aquz]

It’s my workaround:

      <Select
        ref={ref => {
          if (!ref || !ref.select) {
            return;
          }

          const orig = ref.select.onMenuMouseDown;

          ref.select.onMenuMouseDown = function(e) {
            e.nativeEvent.stopImmediatePropagation();
            orig.call(this, e);
          };
        }}
        value={selectedOption}
        onChange={this.handleChange}
        options={options}
      />

unfortunately, other solutions didn’t work for me.