"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!

[Fazliddin-04]

same issue with hello-pangea/dnd components.

error when onclick:

Uncaught TypeError: Cannot read properties of undefined (reading 'map')
    at chunk-KRFT6EFI.js?v=e6746d9c:2162:54
    at Array.map (<anonymous>)
    at buildCategorizedOptions (chunk-KRFT6EFI.js?v=e6746d9c:2160:24)
    at Select2._this.buildCategorizedOptions (chunk-KRFT6EFI.js?v=e6746d9c:2448:14)
    at Select2._this.buildFocusableOptions (chunk-KRFT6EFI.js?v=e6746d9c:2454:64)
    at Select2.openMenu (chunk-KRFT6EFI.js?v=e6746d9c:2872:35)
    at Select2._this.onInputFocus (chunk-KRFT6EFI.js?v=e6746d9c:2613:15)
    at HTMLUnknownElement.callCallback2 (chunk-NFC5BX5N.js?v=e6746d9c:3674:22)
    at Object.invokeGuardedCallbackDev (chunk-NFC5BX5N.js?v=e6746d9c:3699:24)
    at invokeGuardedCallback

[timkindberg]

Happening for us as well after we upgraded from react-select 5.2.1 to 5.8.3.

• Left click doesn't open the menu
• You CAN click the arrow to open/close the menu.
• Right click opens the menu
• Left clicking does allow dragging though for react-dnd

2024-12-16_14-14-21.mp4

[BruceHubbard]

I just hit this problem (which only happened when the app was run in production mode for some strange reason) with react-beautiful-dnd and the solution was to not have dragHandleProps be on the parent element. It seemed to be blocking the click events from getting to the child elements. I moved the dragHandleProps spread to a child element that was our drag handle icon and a sibling to the select boxes and now the select boxes seem to work again.