Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Mousedown event on option didn't stop native propagation

See original GitHub issue

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) {
    this.props.onSelect(this.props.option, event);

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


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

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:13
  • Comments:11 (1 by maintainers)

github_iconTop GitHub Comments

cjhowaldcommented, Sep 20, 2018

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()}>
aquzcommented, May 28, 2019

It’s my workaround:

        ref={ref => {
          if (!ref || ! {

          const orig =;

 = function(e) {
  , e);

unfortunately, other solutions didn’t work for me.

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to stop propagation on click, when you release the ...
You can only stop the click propagation on the "container level". Mousedown and MouseUp events won't help you in this case. – Preli....
Read more >
The Dangers of Stopping Event Propagation - CSS-Tricks
In these cases you're stopping propagation because you don't want an event to happen, not because you have an unwanted event handler registered ......
Read more >
Event Bubbling and Event Catching in JavaScript and React
In this article, I'll help you understand event bubbling and event catching like a pro. I created this resource to help you understand...
Read more >
Event Propagation: React Synthetic Events vs Native Events
You can stop the event from propagating to the next parent by calling e.stopPropagation() , where e is the event.
Read more >
X-On - Alpine.js
This is because we are stopping the propagation of the event immediately and not allowing it to "bubble" up to the <div> with...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found