search

atlassian / react-beautiful-dnd

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

Drag-drop animation doesn't work on mobile #2183

Open OkayX6 opened 3 years ago

OkayX6 commented 3 years ago

Hello,

I have a 2D grid layout, and inside each cell (i,j) is a Droppable > Draggable structure with sticky notes.

Expected behavior

In mobile mode, drag animations should work in all Grid cells..

Actual behavior

Everything works fine in desktop, but the drag animations don't trigger in mobile, except in the first grid cells.

Steps to reproduce

See the video.

Suggested solution?

I have no idea, but display: grid seems to create problems.

What version of React are you using?

React ^17.0.1

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

13.1.0

What browser are you using?

Chrome.

Demo

See the gif: rbd-mobile-bug

2stash commented 3 years ago

@OkayX6 Hi! When you say it doesn't work in mobile mode, you mean the chrome dev button to "switch" to mobile? If yes then that is not to be trusted. That button is really only good to quickly shrink the screen, many things break on that view. I'm 99.99% sure it works fine and is just the chrome dev tools.

You have two options: 1) In Chrome, shrink the window to mobile size manually, this is how I was taught to check mobile views. 2) Push your code to a github page. If you do, post the link here and we can open it up on mobile to check it. ( https://www.freecodecamp.org/news/deploy-a-react-app-to-github-pages/)

OkayX6 commented 3 years ago

Hi, I first noticed this bug on my Android Phone (Chrome) and realized the bug reproduced in the mobile view mode of Chrome Windows.

2stash commented 3 years ago

Can you post the link or code?

OkayX6 commented 3 years ago

So, it's a bit complicated to show the original code in Javascript & protect the private data (I'm using F# code transpiled to Javascript code), I would love to recreate the code but it would require me a couple of hours.

But I found one of the official demo that has the same problems :

https://react-beautiful-dnd.netlify.app/iframe.html?id=board--simple

On mobile version with Android Chrome on my OnePlus 5T, if you try to drag'n'drop items between the last two lists, you have the exact same bug, where no animation happens.

In desktop, no problem.

2stash commented 3 years ago

The gif you took above, was that from your phone or your desktop?

The demo you linked works for me on desktop, and it works on my iphone. It does not work on desktop chrome if I click on "toggle device toolbar" and set it to view as a mobile device, which is to be expected.

The demos are coded with flex box, and if your demo is using grid, and if you are having problems using the demo on your phone, then I would then guess it's an issue with this repo displaying on mobile phones correctly. I only have a iphone so can't do any more mobile testing, but any chance you can open up your site with a different phone and check it?

Here is the code for the simple demo you linked: https://github.com/atlassian/react-beautiful-dnd/blob/master/stories/src/board/board.jsx https://github.com/atlassian/react-beautiful-dnd/blob/master/stories/src/board/column.jsx

OkayX6 commented 3 years ago

Thanks, I will try to check on other phones.

Also, even though the GIF I took above is actually from my Chrome Desktop in mobile mode, the bug behaved exactly the same as on my Chrome Mobile, on my phone, so for illustrative purpose I had included it like that.

ankumar3 commented 1 year ago

Hi guys @OkayX6 @2stash, I'm facing the same issue on my mobile browser (Chrome). Did you guys ever find a solution or workaround for this? Thanks!