Once smooth-dnd is touched, can not scroll any more page

[a-tonchev]

I write about this bug in the react-smooth-dnd, but after I check it looks like the bug is from smooth-dnd.

The bug apears on touch devices when you touch or scroll on the smooth-dnd container once, then no more page scrolling is possible.

Bug is reproduced in browser and also in mobile:

1. Open demo page: https://kutlugsahin.github.io/smooth-dnd-demo/ with mobile chrome / or desktop chrome in Device-mode to simulate touch event

2. Scroll or somehow touch the smooth-dnd container

-> no more native scrolling possible. You can not scroll top or bottom of the page any more. Page is like blocked.

Expected behavior: scrolling should be possible at any time, maybe only not when dragging item.

If you want guys, I can also upload a video?

Thanks and best regards

[a-tonchev]

My workaround:

const cleanClasses = () => {
document.body.className = '';
};

document.addEventListener('touchend', cleanClasses, false);

[mathvp]

@a-tonchev You just saved me with this workaround! Thank you!

[ulises-jeremias]

The problem seems to be here.

smooth-dnd/src/styles.ts

Line 51 in a496ad7

'touch-action': 'none',

Removing only that class should be less invasive 👌🏻

[CharlieDigital]

Alternate fix:

// Call from your drop handler.
export function cleanSmoothDnd() {
  document.body.className = document.body.className
    .split(' ')
    .filter(c => c.indexOf('dnd') < 0)
    .join(' ')
}

[Akash187]

The problem is that normal scrolling is not possible. One can only drag and drop elements only. If you try to scroll to the top or bottom it is not possible.

[CharlieDigital]

@Akash187 You're right! Simulator seems to be misleading in this case. Back to the drawing board.

[danielwarke]

Just adding an observation: @a-tonchev's workaround didn't seem to improve the behavior when running chrome on desktop pretending to be a mobile device, but it does fix the issue when I run the code on my actual iPhone.