React-select: Mousedown event on option didn't stop native propagation

[treecy]

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.

[VincentNewkirk]

I'm experiencing this same issue. +1

[jossmac]

@treecy @VincentNewkirk it sounds like you know exactly how to solve this issue, that's great!

Please open a PR with the changes you'd like and reference this issue, thanks 🙂

[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>

[goldylucks]

@jossmac exposing the event object would solve this as well. Is there a reason it's not exposed?

[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.

[Pau1fitz]

I encountered the same issue, and unfortunately none of the above worked for me. However, the following works.

import Select, { components } from 'react-select';

export const SelectComponent = ({ options }: SelectComponentsProps) => {
  return (
      <SelectElement
        components={{ MenuList }}
        options={options}
      />
    </Wrapper>
  );
};

const MenuList = (props) => (
  <div onClick={e => e.nativeEvent.stopImmediatePropagation()}>
    <components.MenuList {...props}>{props.children}</components.MenuList>
  </div>
);

[lynja04]

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>

I am seeing the same issue with a react-select inside the column of a table. This solution worked for me.

[VitalSobol]

I fixed it with z-index on wrapper

<div className={css.searchSelectRoot}>
        <Select
          value={this.props.selectedCompany}
          onChange={(v) => this.handleSelectChange(v)}/>
</div>

and in css:

.searchSelectRoot {
    z-index: 2;
}

[bladey]

Hello -

In an effort to sustain the react-select project going forward, we're closing old issues.

We understand this might be inconvenient but in the best interest of supporting the broader community we have to direct our efforts towards the current major version.

If you aren't using the latest version of react-select please consider upgrading to see if it resolves any issues you're having.

However, if you feel this issue is still relevant and you'd like us to review it - please leave a comment and we'll do our best to get back to you!