React-beautiful-dnd: Portal solution does not work on mobile when used with react-swipeable-views

[AndrewMorsillo]

Bug or feature request?

Bug

Expected behavior

Drag and drop behaves normally on a touch device (or chrome responsive view)

Actual behavior

Drag does not start or the page scrolls while the draggable stays in a fixed position and does not drop when the finger is lifted.

Steps to reproduce

Use chrome dev console to turn on responsive mode. Go to this code sandbox and try to drag the draggable. https://codesandbox.io/embed/ryp0mkmkzq?codemirror=1

It works fine in desktop (non responsive) mode.

Browser version

Chrome Windows 10 65.0.3325.181

Some interaction between react-swipeable-views and react-beautiful-dnd is breaking DnD only on touch devices. I am using the portal solution here because (as in my reproduction) my app uses react-custom-scrollbars which uses transforms and breaks the normal fixed position behavior.

I am not sure which library is the issue or how to debug, but the reproduction above illustrates the issue nicely.

[alexreardon]

Can you please post a recording of this behaviour? I suspect that some touch events are not being shared nicely between the libraries

[AndrewMorsillo]

@alexreardon Here is a quick screencast. As you can see in the first segment of the video the draggable works fine in desktop mode. The second segment of the video I switch to responsive mode and the draggable can no longer be moved.

https://www.useloom.com/share/685d801cd2614d7bb2e152ea2590cf42

[ivellios]

I am having similar issue. When I put _dnd_ component on the second+ view of the swipeable views they disappear on drag. This is because they show up in the first view which out of viewport (I know because moving cursor extremely to the right show this element coming from the left side). Do you know maybe how to fix it?

[wooandoo]

I have the same issue.
With the solution of @AndrewMorsillo, it works for me, but for only one element. I wouldn't manipulate the DOM to insert a PortalAwareItem like component for each item of a list.

[jtraaraujo]

I also have this issue. Portal only solves the swipeable views issue on desktop..
Anyone found a solution?
Guess it's related with:
https://github.com/atlassian/react-beautiful-dnd/issues/131

[AdamClark2001]

Using portals seems to not work with touch input at all. This can be seen on the official portal example. You can activate the draggable object but it does not respond to movement after that.

[alexreardon]

https://github.com/atlassian/react-beautiful-dnd/blob/master/docs/patterns/using-a-portal.md#using-a-portal

⚠️ Moving items into a React Portal after a touchstart is currently not working 😞. React issue: #13113. We are tracking it here: #582. Due to this issue with React Portals drag and drop will not work on touch devices if using a React Portal

😞

[alexreardon]

This should be fixed in 12.0.0-alpha.7

1317

[ivellios]

Did anyone had a chance to make it work? docs with patterns on portal are gone. Not sure where should I go now with this :/ I am trying version 13.0 but still to no success with react-swipeable-views. When I remove Portal, I can move items, but they are gone (most likely again away from the viewport). Anyone has a working solution example?

EDIT: So actually it works when using cloning API: https://github.com/atlassian/react-beautiful-dnd/blob/master/docs/guides/reparenting.md

EDIT 2: For the users of react-swipeable-views: I am additionally using DragDropContext and on DragStartI set SwipeableView.disasbled to true. That way it does not react to touch on actions with dnd.