React-select - Can't StopPropagation On ValueRenderer Component

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

Solution 1:

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>

Solution 2:

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