React-beautiful-dnd: Not able to drag and drop on mobile using React Portal

[Chariyski]

Bug or feature request?

Bug

Expected behavior

To be able to drag and drop items on mobile.

Actual behavior

The items are marked as draggable, but can't be dragged.

Steps to reproduce

Go to https://codesandbox.io/s/3465m7xmw6 and open mobile emulation.

What version of React are you using?

16.3

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

7.1.3

What browser are you using?

Chrome

[alexreardon]

We'll track as a part of #567

[alexreardon]

Here is an independent example that shows of the behaviour: https://codesandbox.io/s/nr75vkklnm

This example does not use react-beautiful-dnd at all. It looks like moving something into a portal after a touchstart stops any window touchmove and touchend events from firing.

Here is an example that uses a React.Portal but it shifts the component into a component before a touch start. That works fine. https://codesandbox.io/s/v54x54vp5

I will create an issue on the React project to track this.

Unfortunately given that this issue is with React.Portal itself we are unable to action this directly

[alexreardon]

React issue created: https://github.com/facebook/react/issues/13113

[alexreardon]

I'll update the docs to let people know about this issue

[alexreardon]

This is surpising as I thought I tested using portals on mobile... very confusing.

Oh well, I am able to reproduce it outside of this library so for now we cannot really do too much :(

[alexreardon]

I have created a warning in the docs: https://github.com/atlassian/react-beautiful-dnd/pull/583

[alexreardon]

This is also caused by the removing of the existing node and re-creating of one. It looks like there could be a workaround which I will explore: https://github.com/facebook/react/issues/13113#issuecomment-410311889

[Chariyski]

Hello,
any news about the problem ?

[alexreardon]

i have not digged into this one yet

[paceto256]

Any chance to use this solution https://github.com/facebook/react/issues/13113#issuecomment-438901454 ?

[alexreardon]

This might be fixed as a part of our event changes for #1293

[alexreardon]

I am looking into this as a part of #1293

[alexreardon]

I can confirm I have found a workaround for this as a part of #1293. The new pattern also works with dragging clones which is needed for virtual lists

/cc @TrySound

[TrySound]

Awesome

[alexreardon]

Shipping in 12.0 #1317

[alexreardon]

Fixed in 12.0.0-alpha.7