Sortable not working correctly when using touchscreens

[samrobbins85]

When copying the example from the documentation, the sorting works correctly when in the desktop view, but when using the devtools to emulate mobile and when actually on mobile, the sorting glitches and doesn't allow the items to be sorted. This can be seen in this repo https://github.com/samrobbins85/dnd-kit-touch-bug. However testing the storybook for this works correctly https://master--5fc05e08a4a65d0021ae0bf2.chromatic.com/?path=/story/presets-sortable-vertical--basic-setup. Is there something that needs adding to the documentation example for it to work correctly?

[clauderic]

Refer to https://docs.dndkit.com/api-documentation/sensors/pointer#recommendations

[davidko5]

For those who use Tailwind - specify touchAction: 'none' on style attribute and NOT on className attribute using the Tailwind syntax. I'am not sure why, but that was my issue that I wasn't able to locate for a long time.

[kugurerdem]

For those who use Tailwind - specify touchAction: 'none' on style attribute and NOT on className attribute using the Tailwind syntax. I'am not sure why, but that was my issue that I wasn't able to locate for a long time.

Thanks @davidko5, that worked out for me.

[PaddyLock]

OMG @davidko5 you star, I've been trying to fix this for 2 days. The docs need updating for tailwind users please DND folks!

apply this to drag handle element

style={{ touchAction: 'none' }}