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

MircoBabin commented 6 days ago

Is there an existing issue for this?

[X] I have searched the existing issues

Have you updated FilePond and its plugins?

[X] 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 commented 6 days ago

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

rikschennink commented 6 days ago

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 commented 4 days ago

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

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

MircoBabin commented 3 days ago

@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 commented 1 day ago

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

pqina / filepond