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

[bennaaym]

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!