React-select - can't stopPropagation on valueRenderer component

user_479654 0
Viewed 6398

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

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

react-select react-bootstrap reactjs javascript
2 Answers

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

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

user_4796540
Related