Portal based drag broken with touch

[TrySound]

Common issues setup guide

https://react-beautiful-dnd.netlify.com/?path=/story/board--dragging-a-clone

Check your console

All clear

Are you new to rbd?

I'm an old one

Duplicates

I believe similar behaviour was before portals fix.

Expected behavior

Actual behavior

Steps to reproduce

Run devtools in mobile mode. I use iphone 5

What version of React are you using?

16.9

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

12.0.0

What browser are you using?

Chrome, safari ios

Demo

https://react-beautiful-dnd.netlify.com/?path=/story/board--dragging-a-clone

[alexreardon]

Try loading it out of the iframe and see what happens

[alexreardon]

Try the little expand button

[TrySound]

Same

[alexreardon]

I just tested it on my iOS device (latest OS) and it seems to be working correctly. What version of safari / iOS are you using?

[alexreardon]

I think safari made some changes to mobile stuff in the last update which did impact mobile a bit

[TrySound]

I use simulator with iOS 13.1 and chrome devtools with touch mode. Though in simulator the problem look differently

[alexreardon]

It might be an issue with the simulator?

…

On Thu, Nov 14, 2019 at 9:32 AM Bogdan Chadkin ***@***.***> wrote: I use simulator with iOS 13.1 and chrome devtools with touch mode. Though in simulator the problem look differently [image: Kapture 2019-11-14 at 1 29 37] <https://user-images.githubusercontent.com/5635476/68810040-461a5c00-067e-11ea-9304-cdca34ac368c.gif> — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#1604?email_source=notifications&email_token=AAQU33IPKUW4QQYDQOVMZD3QTR6AHA5CNFSM4JNCOGV2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOED743OY#issuecomment-553635259>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAQU33OGYB74JGSBZRJYPALQTR6AHANCNFSM4JNCOGVQ> .

[TrySound]

My boss got it on his iPhone in production

[TrySound]

Will try to provide better reproduce

[alexreardon]

Cheers

…

On Thu, Nov 14, 2019 at 9:39 AM Bogdan Chadkin ***@***.***> wrote: Will try to provide better reproduce — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#1604?email_source=notifications&email_token=AAQU33PCCBYITBDZS6TG62TQTR6ZDA5CNFSM4JNCOGV2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOED75MGI#issuecomment-553637401>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAQU33LDAAO572J3UPUTXUDQTR6ZDANCNFSM4JNCOGVQ> .

[TrySound]

@alexreardon My tester has these glitches on her iPhone with the latest safari version.
https://vimeo.com/373931892

[alexreardon]

Hey @TrySound, it feels like we are getting closer!

Can I confirm what version of iOS is being run?

[alexreardon]

Interesting! Can you please open it up out of the iframe and confirm the issue is still occurring?

[TrySound]

Looks like the problem is iframe. Now even simulator stopped glitching. Don't know the reason. Thanks :)

[alexreardon]

I’m super glad it is all good!

[jankuss]

I'm still having the same issue.

This is broken for example:
https://react-beautiful-dnd.netlify.com/iframe.html?id=portals--using-your-own-portal&viewMode=story

I use Chrome in the Touch Simulation mode. The touchstart on the Draggable element is recognized and is transitioned into the dragging state and moved into a portal. Subsequent touchmove events on the other hand don't seem to be recognized. It seems the touchend event is not being recognized aswell, as when I release the draggable it is still stuck in the dragging state.

When the Draggable is stuck in this state and I touchstart it again, everything works fine.

[Merynek]

Why is this issue closed???
You can reproduce this issue in your own example so why closed??
Just open your examle with portal on your mobile and try dragging.
It is works only when you touch twice so it doesnt fixed.

https://react-beautiful-dnd.netlify.app/iframe.html?id=portals--using-your-own-portal&viewMode=story

[DavGarcia]

I had the same issue, but with react-dnd and react-dnd-touch-backend. I wonder if the issue is caused by some change in browser touch behavior or iOS rather than a library issue? Anyone find a fix?

[Merynek]

No the problem is in library, bcs I found the commit what caused it.
This issue: #2111