feat: Add "context" property to IonReorderGroup

[Omer-Shahar]

Feature Request

Ionic version: 5.4.13 @ionic/react version: 4.11.8

Describe the Feature Request

I'm using Ionic React, and I want to create an 'IonReorderGroup' inside a 'div' that has a scrollbar. However, as I saw in Ionic's core code, the 'autoScroll' function works only with the 'IonContent' that wraps the Group. Therefore, I want the 'IonReorderGroup' tag to have an optional prop (called 'context', for instance). In the 'context' prop I will be able to pass the ref of the 'div' element (or the div's id), and then the autoScroll function will affect the div's scrollbar when I drag an element.

Related Code

Solving this problem is pretty easy. All it requires is to add the 'context' property, then changing the following lines in the path:

node_modules\@ionic\core\dist\collection\components\reorder-group\reorder-group.js

const contentEl = this.el.closest('ion-content');

Will become

var contentEl;
if (this.context !== null) contentEl = this.context;
else contentEl = this.el.closest("ion-content");

Or Something similar...

Additional Context

An example of a use case: On the left, there is a 'div' that contains an 'IonReorderGroup'. Because the list is long, the 'div' has a styled scrollbar. However, when I drag an item, there is no autoScroll, so there are glitches. With a 'context' property, such as context={divElement} or context="divID" this problem can be easily solved.

[liamdebeasi]

Hello, thanks for the issue! We are currently exploring ways to improve our components when working with non ion-content scrollable areas. The particular use case given was for virtual scroll where scrolling is on a child element rather than ion-content, but we think the proposed API could work for your use case as well.

Discussions are happening on https://github.com/ionic-team/ionic-framework/pull/24426, and we hope to add this feature in the future.

To be clear, we are designing this feature with the virtual scroll use case in mind, so I would not expect perfect feature parity when using a non ion-content scrollable area. However, I think the API that is being proposed should work well enough such that the issue mentioned here no longer happens.

I am going to close this as well as the associated PR in favor of this new API. Please feel free to follow #24426 for updates on this new API. Thanks!

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.