search

atlassian / pragmatic-drag-and-drop

Fast drag and drop for any experience on any tech stack
https://atlassian.design/components/pragmatic-drag-and-drop
Other
7.45k stars 133 forks source link

In Tutorial on iOS (17.2+) the required press-and-hold-to-drag gesture can trigger image action state. #13

Open IanBellomy opened 1 month ago

IanBellomy commented 1 month ago

Not sure if this is a bug or as designed.

In the tutorial, the draggable ref is to an img but on iOS dragging requires press-and-hold which when performed on an img, can activate the OS's image action state if a move does not occur soon enough. On an actual device, when the finger obscures the visual draggable-state change, it's easy to hold 'too long'.

https://github.com/atlassian/pragmatic-drag-and-drop/assets/17239616/d8164cba-489c-4ce3-9dad-04a7b543b953

Question: Should draggable be expected to produce consistent cross-platform behavior absent side effects like these by default or is it up to the developer to be aware of and handle these kinds of situations?

alexreardon commented 1 month ago

Thanks for raising this! I'll update this asap. Here is the fix: https://github.com/atlassian/pragmatic-drag-and-drop/issues/9

I am also going to call this iOS behaviour out in the documentation

axeleroy commented 1 month ago

Hello, I believe this issue is not iOS-specific as I reproduce it on Android on both Chrome and Firefox: trying to drag pieces in the Tutorial will open the context menu for the underlying image. You need to set pointer-events: none on the image.

alexreardon commented 4 weeks ago

How interesting that -webkit-touch-callout did not resolve the issue. I'll take another look 👀

maiconcarraro commented 2 weeks ago

How interesting that -webkit-touch-callout did not resolve the issue. I'll take another look 👀

@alexreardon I had to fix a similar situation while using dnd-kit and besides touch callout none, I also had to use add userSelect: "none" to prevent the text selection, plus onContextMenu={(e) => e.preventDefault()} to prevent the context menu.

I didn't test in pragmatic yet, I'm evaluating the issues and behaviors before I commit to the migration.... until there.... trying to help :)

alexreardon commented 2 weeks ago

Super keen to get a good outcome here. I need to put some time into this one. If anyone wants to have a poke and explore some techniques, that would be awesome too. Pdnd is just using the platform, so our solution would be common across platform implementations