"react-select" Dropdown Not Opening Inside "react-beautiful-dnd" Draggable Component

Problem

When using react-select inside a draggable component from react-beautiful-dnd, the dropdown does not open on click.

Versions

• react-select: ^5.8.0
• react-beautiful-dnd: ^13.1.1

Steps to Reproduce

1. Create a draggable component using react-beautiful-dnd.
2. Inside the draggable component, include a react-select dropdown.
3. Attempt to open the react-select dropdown by clicking on it.

Expected Behavior

The react-select dropdown should open when clicked.

Actual Behavior

The react-select dropdown does not open when clicked.

Additional Information

• This issue occurs only when react-select is used inside a draggable component. It works fine outside of it.
• Select element from UI libraries like Chakra UI or Material UI works without any issue within draggable component

Request: If possible, could a quick fix be provided for this issue? It's blocking key functionality in our application. Thanks in advance!

Reproduce the issue with react-select ^5.8.0 nested inside a react-beautiful-dnd ^13.1.1 draggable component, comparing it with a select outside the draggable and the cited Chakra UI or Material UI controls. Trace the click behavior and document a fix that allows the react-select dropdown to open inside the draggable without breaking other controls.