feat: ion-reorder-group optional require-long-press prop

[tetsuwanadam]

Prequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already include this feature request, without success.

Describe the Feature Request

Add a new require-long-press prop to ion-reorder-group which enables reorder only after an item has been long-pressed.

Describe the Use Case

1. Using reorder on a list of ion-item elements wrapped in ion-reorder tags is currently unfeasible on touch devices. Moving your finger up or down an item immediately initiates reorder, which prevents the user from scrolling the page.
2. Currently ion-item-sliding doesn't work on ion-item elements wrapped in ion-reorder tags.
3. Long-pressing to reorder is a common UI feature. (See the iOS built-in Reminders app, among others.)

Describe Preferred Solution

Add an optional require-long-press prop to ion-reorder-group, which if set to true would require a long press before starting reorder.

Describe Alternatives

I tried using a custom long-press gesture to toggle the ion-reorder-group disabled prop from false to true, but this doesn't work because the initial press event then doesn't register in ion-reorder-group.

Related Code

No response

Additional Information

I'll be submitting a pull request which implements the feature in the next day or two.

[liamdebeasi]

Thanks for the issue. Can you reproduce this issue in an Ionic starter app and provide a link to the repo?

[ionitron-bot[bot]]

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please reproduce this issue in an Ionic starter application and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.

For a guide on how to create a good reproduction, see our Contributing Guide.

[tetsuwanadam]

Here's the link to the issue reproduction. I have a fix ready to go once I've received the go-ahead.

https://github.com/tetsuwanadam/ion-reorder-group-issue

[liamdebeasi]

Thanks! I think adding the long press/threshold option here makes sense. I need to think about how the API should look, but feel free to put up the PR and I can review it. (Might not be until early next week - I am going to be away from my computer for a few days).

[tetsuwanadam]

My pull request is above, I hope you find it useful!

The long press gesture code was based on this post by Simon Grimm on the Ionic blog: https://ionicframework.com/blog/building-interactive-ionic-apps-with-gestures-and-animations/

[tetsuwanadam]

Any chance of seeing this included in v6? If any adjustments are needed to the pull request I'm happy to tackle them!

[liamdebeasi]

Hey there,

We are wrapping up the final features to go into the 6.0 release, but we will try to take a look at your PR as soon as we can. Thanks for contributing!

[tetsuwanadam]

Thank you Liam!

[tetsuwanadam]

After figuring out how to test Ionic core changes on a mobile device I've realized my pull request prevents page scrolling on touch devices. Have closed it for now, I'll update if I find a solution.

[piotr-cz]

Long press would be most intuitive way to reorder items, however I failed to implement it at the app level using Ionic gestures.

In short: Custom long press gesture conflicted with reorder gesture

[loyaj]

I've been keeping an eye on this and would still like to see it implemented. Is there still interest in that, or possibly any workarounds? (Even outside of what Ionic provides but that is compatible with ionic?)

[tetsuwanadam]

I would still very much like to see this implemented as well.

[immortalt]

I am also very interested in this prop.