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: https://github.com/JedWatson/react-select/pull/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.
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
Summary
In version 5.3 of react-select, a check for
defaultPreventedwas 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: https://github.com/JedWatson/react-select/pull/5134.This has prevented double events, but as a side-effect, it changed how Select responds to preventDefault. Now, if an
onMouseDownevent 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-dndRelated issues
This issue triggered another consumer of react-select and RBD to refactor: https://github.com/grafana/grafana/pull/50025