search

atlassian / pragmatic-drag-and-drop

Fast drag and drop for any experience on any tech stack
https://atlassian.design/components/pragmatic-drag-and-drop
Other
9.8k stars 223 forks source link

BUG: Cursor Positioning Issue in React 18 when using setCustomNativeDragPreview #96

Closed kushanksriraj closed 4 months ago

kushanksriraj commented 4 months ago

When I use react 18's creatRoot API, and using setCustomNativeDragPreview to show the dragging preview, the cursor position where I picked the card always goes to top left, but it works fine with the react 17's render API.

Please check the below video and attached sandbox link.

Stackblitz

https://github.com/user-attachments/assets/d586aa36-a2d8-459b-af19-cbda7e3330e1

kushanksriraj commented 4 months ago

Looks like there is already similar issue: https://github.com/atlassian/pragmatic-drag-and-drop/issues/54

alexreardon commented 4 months ago

Hi there,

This react@18 issue was resolved in 1.1.6

https://atlassian.design/components/pragmatic-drag-and-drop/core-package/changelog/changelog#116

Could you please try upgrading and then trying again? Cheers

kushanksriraj commented 4 months ago

I tried upgrading to 1.2.1 but unfortunately it is still not working: https://stackblitz.com/~/github.com/kushanksriraj/pragmatic-dnd?file=src/main.tsx

"@atlaskit/pragmatic-drag-and-drop": "1.2.1",

Thank you for the great work, really appreciate it!

alexreardon commented 4 months ago

Thank you. Bug confirmed. I now have a work in progress fix for react@18

alexreardon commented 4 months ago

A fix has been shipped for this bug in 1.2.3. Thanks for helping to provide the information required to get this actioned quickly @kushanksriraj.

Enjoy!