I am trying to display a popover on click over a react-select selected value element as follow :

My issue happens when I click on the popover trigger, the dropdown opens and the popover too... I just want to open the popover, I tried e.nativeElement.stopPropagation, e.stopPropagation, e.preventDefault and so on without success. Here is a sandbox If you want to know how I did this and how to reproduce the issue.

Thanks for you help

I am trying to display a popover on click over a react-select selected value element as follow :

My issue happens when I click on the popover trigger, the dropdown opens and the popover too... I just want to open the popover, I tried e.nativeElement.stopPropagation, e.stopPropagation, e.preventDefault and so on without success. Here is a sandbox If you want to know how I did this and how to reproduce the issue.

https://codesandbox.io/s/pjv7vmlv3j

Thanks for you help

• javascript
• reactjs
• react-bootstrap
• react-select

• Possible duplicate of React-Select onClick on multi tag prevent open dropdown – Mišo Commented Apr 13, 2019 at 9:15

2 Answers 2

The react-select opens the dropdown as a reaction to onMouseDown event, not onClick and that's why any onClick={(e) => e.stopPropagation()} can't prevent to open the dropdown. You need to add onMouseDown={(e) => e.stopPropagation()} along with the onClick handler to open only the popover.

In your code the snippet below should do the trick:

    <span onMouseDown={e => e.stopPropagation()} style={styles.root}>
      <span style={styles.label}>{label}</span>
      <OverlayTrigger
        trigger="click"
        rootClose
        placement="bottom"
        overlay={popover}
        animation={false}
      >
        <span style={styles.trigger}>{`${selected} / ${contacts.length}`}</span>
      </OverlayTrigger>
    </span>

Well I found a way to cancel the event. I just add an onValueClick prop to the <Select /> and put the stopPropagation there!