Summary

In version 5.3 of react-select, a check for defaultPrevented was added to the onMouseDown event for the Select control, in order to prevent double events when clicking on the dropdown button or other interactive elements inside the Select: #5134.

This has prevented double events, but as a side-effect, it changed how Select responds to preventDefault. Now, if an onMouseDown event has default prevented before it reaches Select, the component behaves inconsistently. If the user presses on the dropdown, it still opens the select - but if the user presses the container, it doesn't.

This manifests most noticeably when a parent element calls preventDefault during the capture phase; an example of a library that does this is react-beautiful-dnd.

This may be in the realm of undefined behaviour, but an alternate approach to preventing duplicate events would provide more consistent behaviour for Select, and avoid edge cases like this where part of a select is interactive, but not others.

Steps to reproduce

Minimal reproduction: https://codesandbox.io/p/sandbox/reproduction-select-with-a-preventdefault-parent-656c4l?file=%2Findex.tsx%3A57%2C28

Try pressing the selects, on the input, on the dropdown button, and on the main container. I've included a minimal example, as well as an example of the component inside react-beautiful-dnd

Related issues

This issue triggered another consumer of react-select and RBD to refactor: grafana/grafana#50025