search

atlassian / react-beautiful-dnd

Beautiful and accessible drag and drop for lists with React
https://react-beautiful-dnd.netlify.app
Other
32.94k stars 2.52k forks source link

Touch creates portal, but a second touch is required to re-initiate drag #2277

Open acamann opened 3 years ago

acamann commented 3 years ago

Thank you for the great library - I'm working on moving our product over from react-dnd so we can more consistently support touch

Expected behavior

intent touch creates portal and touch should be transferred to ref of object within portal to begin drag

Actual behavior

intent touch starts drag enough to create portal, but a second touch is necessary to now start dragging the portal

https://user-images.githubusercontent.com/57601245/124792022-3b2ad400-df12-11eb-9130-02523bd47805.mp4

Steps to reproduce

  1. https://react-beautiful-dnd.netlify.app/iframe.html?id=portals--using-your-own-portal&viewMode=story
  2. use chrome tools or mobile device and attempt drag using touch

Suggested solution?

not sure, but something seems to be getting lost on the reference to the object being dragged once it is moved into a portal

What version of React are you using?

16.12.0 (but also observed on above demo)

What version of react-beautiful-dnd are you running?

13.1.0

What browser are you using?

chrome, but observed on safari on iPad

acamann commented 3 years ago

The above is still an issue, but I got around it in my implementation by removing the portal and resolving other issues I had been seeing that made me try to use the portal (resulting from will-change: transform; style that I had previously applied to try to force safari to round corners, but was instead interfering with the expected default behavior of react-beautiful-dnd)

azamuddin commented 11 months ago

I have this problem too, it's really crucial bug for smooth mobile experience, tested on Safari IOS 16

nflow commented 3 months ago

yea .. me too