Mousedown event on option didn't stop native propagation
See original GitHub issueRecently 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.
Issue Analytics
- State:
- Created 5 years ago
- Reactions:13
- Comments:11 (1 by maintainers)
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
I ran into this as well. Until the fix lands, a simple workaround is to wrap the Select and swallow the event.
It’s my workaround:
unfortunately, other solutions didn’t work for me.