[Bug] On mobile - putting finger on a photo and trying to scroll the page (touch gesture) does not work.

[MircoBabin]

Is there an existing issue for this?

• I have searched the existing issues

Have you updated FilePond and its plugins?

• I have updated FilePond and its plugins

Describe the bug

On mobile when putting the finger on a photo and then trying the scroll the page by moving up or down does not work.

Reproduction

I constructed a CodePen at https://codepen.io/MircoBabin/full/dyxKyqq

• Open the CodePen on a mobile phone.
• Tap Add photo's button.
• Select 3 photo's from your galery.
• Wait until upload ready. The photo's are not displayed correctly, but that is not the issue. This is probably because this is my first CodePen ever and the server part of FilePond is missing.
• Now put your finger in the middle of the first photo and move swipe your finger up. Trying to scroll down to the upload button. This does not work.
• Putting your finger at the (very small) sides (whitespace) and moving up/down does work.

Environment

- Device: LG Mobile phone (LG-M200n)
- OS: Android 8.1.0
- Browser: Google Chrome (unknown version - don't know where to find it on the phone)

Other mobile phones as well.

[MircoBabin]

@lattaai1 Well you did not fix the issue. You did not even create a correct pull request.

[rikschennink]

Thanks for reporting @MircoBabin, I've blocked this AI bot. What a timeline this is.

This bug was fixed for free by Latta AI

No it wasn't. I had to spend time to figure out what the #&^$*@ was going on.

[zmalter99]

@MircoBabin I ran into this issue as well. The CSS below fixed it for me.

.filepond--item {
    touch-action: auto;
}

[MircoBabin]

@zmalter99 thank you! That workaround works perfectly. After including filepond.min.css, include the workaround, e.g.:

<link rel="stylesheet" href=filepond.min.css">

<style>
/*
https://github.com/pqina/filepond/issues/1018

Workaround from @zmalter99 for issue:
On mobile when putting the finger on a photo and then trying to scroll the page by moving up or down does not work.
*/
.filepond--item {
    touch-action: auto;
}
/* End workaround https://github.com/pqina/filepond/issues/1018 */
</style>

@rikschennink perhaps this workaround can be incorporated in FilePond ?

[rikschennink]

@MircoBabin I'll run some tests and if it works cross device I'll add it 👍