Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug] Can't scroll over filepond container on mobile when allowReorder is enabled #865

Open
2 tasks done
alexandros-bantzos opened this issue Oct 16, 2022 · 4 comments · May be fixed by #940
Open
2 tasks done

[Bug] Can't scroll over filepond container on mobile when allowReorder is enabled #865

alexandros-bantzos opened this issue Oct 16, 2022 · 4 comments · May be fixed by #940
Labels

Comments

@alexandros-bantzos
Copy link

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

The the option allowReorder is enabled, you can't swipe up/down on mobile. the moment you touch the screen in the area, filepond will attempt to "grab" the image.

If you have filepond full width on mobile and select many photos that cover the most part of the screen, you are then unable to scroll up/down the page.

Tested on vanilla Js and jQuery.

Reproduction

Any basic implementation of filepond with allowReorder and the preview plugin (to take up more space) should do.
Reproducible even on latest desktop chrome on mobile view via devtools.

Environment

- Device: Desktop / Samsung Galaxy A40
- OS: Windows 11 / Android 11
- Browser: Brave (Chromium 106.0.5) / Firefox Focus
@alexandros-bantzos
Copy link
Author

Any update on this one?

@rikschennink
Copy link
Collaborator

No really, I'd just not make it full-width on mobile for now.

I'm working on v5 in which I hope to address most of the current open issues.

@mrkazmierczak
Copy link

@rikschennink FilePond v5 will be backward compatible?

@rikschennink
Copy link
Collaborator

It's a major version change so no there will be breaking changes.

I plan to release some sort of proxy wrapper to make switching from 4 to 5 easier.

jakejackson1 added a commit to jakejackson1/filepond that referenced this issue Oct 16, 2023
Swapping to a Long Press to drag and reorders files signals intent. Without this intent, the reordering feature can hijack scrolling on touch-devices, and users can become unintentionally trapped reordering a file. The long press restores user-intent and dramatically improves the UX on touch-devices.

Resolves pqina#865
jakejackson1 added a commit to jakejackson1/filepond that referenced this issue Oct 16, 2023
Swapping to a Long Press to drag and reorders files signals intent. Without this intent, the reordering feature can hijack scrolling on touch-devices, and users can become unintentionally trapped reordering a file. The long press restores user-intent and dramatically improves the UX on touch-devices.

Resolves pqina#865
jakejackson1 added a commit to jakejackson1/filepond that referenced this issue Oct 16, 2023
Swapping to a Long Press to drag and reorders files signals intent. Without this intent, the reordering feature can hijack scrolling on touch-devices, and users can become unintentionally trapped reordering a file. The long press restores user-intent and dramatically improves the UX on touch-devices.

Resolves pqina#865
jakejackson1 added a commit to jakejackson1/filepond that referenced this issue Oct 16, 2023
The `reorderHoldInterval` option allows people to opt-into “long press” / “press and hold” on a file to reorder. This feature is disabled by default, and there are no backwards compatibility issues.

Currently, on small touch-screen devices the native scroll experience can be hijacked by the reorder feature. Enabling “long press” to reorder dramatically improves the UX for these users.

**Usage***
```js
FilePond.create(inputElement, {
    allowMultiple: true,
    allowReorder: true,
    reorderHoldInterval: 100,
});
```

Resolves pqina#865
jakejackson1 added a commit to jakejackson1/filepond that referenced this issue Oct 16, 2023
The `reorderHoldInterval` option allows people to opt-into “long press” / “press and hold” on a file to reorder. This feature is disabled by default, and there are no backwards compatibility issues.

Currently, on small touch-screen devices the native scroll experience can be hijacked by the reorder feature. Enabling “long press” to reorder dramatically improves the UX for these users.

**Usage***
```js
FilePond.create(inputElement, {
    allowMultiple: true,
    allowReorder: true,
    reorderHoldInterval: 100,
});
```

Resolves pqina#865
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants