search

clauderic / dnd-kit

The modern, lightweight, performant, accessible and extensible drag & drop toolkit for React.
http://dndkit.com
MIT License
12.87k stars 640 forks source link

In Storybook dragging gets stuck when long-pressing on Android #555

Open olegcherr opened 2 years ago

olegcherr commented 2 years ago

This doesn't work in Chrome on Android: https://5fc05e08a4a65d0021ae0bf2-unebtvimdp.chromatic.com/?path=/story/presets-sortable-vertical--press-delay

https://user-images.githubusercontent.com/3730074/148017262-96c212fe-5780-4fc3-8f2c-40ce8447966a.mp4

clauderic commented 2 years ago

Can you replicate the issue on this URL? https://5fc05e08a4a65d0021ae0bf2-unebtvimdp.chromatic.com/iframe.html?id=presets-sortable-vertical--press-delay&viewMode=story

olegcherr commented 2 years ago

The same problem:

https://user-images.githubusercontent.com/3730074/148562333-1472e9a6-176a-48c1-847f-375faec857e1.mp4

sitogi commented 2 years ago

I did not reproduce this with Press Delay, but the same problem occurs with the following two.

Environment

Knaackee commented 1 year ago

The problem occurs on chrome for android because of the redesigned long-press context menu since chrome 78.

An easy fix is to use user-select: none; a.k.a userSelect: 'none', in your container style.

vittoriozamboni commented 1 year ago

Thank you @Knaackee , had the same problem for a while. Unfortunately, the container for me is not enough since I have elements that are close to others and being precise would require another context or props drilling to set another upper state to apply the class (since the text should be selectable while not dragging).

I have solved with pure JS/CSS:

body.is-dragging {
  * {
    user-select: none;
  }
}
// Apply to any DnD context
<DnDContext
  onDragStart={() => document.body.classList.add('is-dragging')}
  onDragEnd={() => document.body.classList.remove('is-dragging')}
>

Wondering if it can be something we can control via DnD context prop in the library?