Set the touchAction property to "none" cause disrupt default scroll behavior on mobile

[nmhungdev]

I have a grid of elements that almost fills the entire screen, leaving only a small gap. I noticed that the library had applied touch-action: none, which prevents swiping to scroll on Android devices or in the developer tools’ touch mode.

To elaborate, here’s what’s happening:

• touch-action: none disables the default touch behaviors like scrolling, zooming, or swiping gestures.
• This means any touch interaction (like dragging the grid or swiping) won’t function as expected.
• This behavior prevents users from performing natural swipe actions on Android or when testing in browser developer tools with touch emulation enabled.

Code

data.node.el.setAttribute("role", "option");

data.node.el.setAttribute("aria-selected", "false");

data.node.el.style.touchAction = "none"; // Here

config.reapplyDragClasses(data.node.el, data.parent.data);

[hungify]

I am experiencing the same issue.
I have created an example to reproduce it : Stackblitz

After branching and reviewing the code, I have a question:
Why are the pointermove and pointerup events being listened to early, instead of handled within pointerdown?
Doing so makes it quite challenging to address this issue. I’m eager to discuss possible solutions to this problem.

[hungify]

My research on this issue.

The touch-action CSS property sets how an element's region can be manipulated by a touchscreen user (for example, by zooming features built into the browser).
Source: MDN

For Pointer Events, there is no way to prevent the default behaviour of the browser on touch devices when interacting with a draggable element from the pointer event listeners. Using touch-action: none; is the only way to reliably prevent scrolling for pointer events.

If your draggable item is part of a scrollable list, we recommend you use a drag handle and set touch-action to none only for the drag handle so that the contents of the list can still be scrolled, but that initiating a drag from the drag handle does not scroll the page => The full block-size drag doesn't seem to work.

If the above recommendations are not suitable for your use-case, we recommend that you use both the Mouse and Touch sensors instead, as Touch events do not suffer the same limitations as Pointer events, and it is possible to prevent the page from scrolling in touchmove events.

Once a pointerdown or touchstart event has been initiated, any changes to the touch-action value will be ignored. Programmatically changing the touch-action value for an element from auto to none after a pointer or touch event has been initiated will not result in the user agent aborting or suppressing any default behavior for that event for as long as that pointer is active (for more details, refer to the Pointer Events Level 2 Spec).

Source: DnD Kit

[sashamilenkovic]

@hungify @nmhungdev Whoops! This was a big mistake on my apart. This addressed at v0.3.0