bug: ionReorderGroup does not work with custom components

[jsBiztech]

Bug Report

I am trying to use ion-reorder for drag & drop functionality it works fine if the loop is on ionic components (i.e.list, item) but when I try with custom components the reorder puts components at the end of the list.

Ionic version: [ ] 4.x [x] 5.x

Current behavior: When using reorder with custom components it sets items at the end of the list.

Expected behavior: When using reorder with custom components it should set item at the place I drop.

Related code: https://stackblitz.com/edit/ionic-v4-angular-tabs-r9zbtf?file=src/app/tabs/tabs.page.html

Other information: checked this: https://github.com/ionic-team/ionic-framework/issues/19447 No solution on either forum or any other GitHub issues

Ionic info:

Ionic:

   Ionic CLI                     : 6.12.1
   Ionic Framework               : @ionic/angular 5.6.0-dev.202102091522.082160d
   @angular-devkit/build-angular : 0.1101.3
   @angular-devkit/schematics    : 11.1.3
   @angular/cli                  : 11.1.3
   @ionic/angular-toolkit        : 3.0.0

Capacitor:

   Capacitor CLI   : 2.4.4
   @capacitor/core : 2.4.4

Cordova:

   Cordova CLI       : 10.0.0
   Cordova Platforms : none
   Cordova Plugins   : no whitelisted plugins (0 plugins total)

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   NodeJS : v10.23.0
   npm    : 6.14.8
   OS     : macOS Big Sur
   Xcode  : Xcode 12.2 Build version 12B45b

[daniel-zero]

@liamdebeasi I have the same Issue and created a example repository: https://github.com/daniel-zero/ionic-reorder-list-bug

It is not possible to pass in a custom ion-item child component to a reorder-list component. The reorder feature will not work (no animations and no functionality)

[DwieDima]

I can confirm this is still an issue in Ionic 7 (and probably Ionic 8) :( I'm using Angular.