bug: `ion-reorder` complete() method moves injected Angular comments used by *ngFor

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• v4.x
• v5.x
• v6.x

Current Behavior

After the first item of a list is reordered, additional items are inserted at locations other than the bottom.

The root cause is that when doReorder calls ev.detail.complete(); Ionic’s DOM manipulation causes the Angular binding comment to move relative to the list items. New DOM elements are inserted by Angular at the location of this comment.

<!--bindings={
  "ng-reflect-ng-for-of": "Item 0,Item 1,Item 2,Item 3"
}-->

Expected Behavior

New items pushed onto the list array should be added to the bottom.

Specifically, the location of Angular’s comment should remain at the end of the items generated by ngFor after Ionic reorders the DOM elements.

Steps to Reproduce

1. Use @ionic/angular.
2. Create an ion-reorder-group with a list of items generated by ngFor.
3. Drag the first item down (e.g. to the bottom of the list).
4. Now add a new item to the array referenced by ngFor.

Code Reproduction URL

https://stackblitz.com/edit/ionic6-angular13-chauqs

Ionic Info

The StackBlitz is using Angular 13.3.1 and @ionic/angular 6.0.14, but the same behavior is present on 5.5

Additional Information

The workaround I’m using for now is to reject the reorder operation by calling ev.detail.complete(false);, so the DOM does not change, rely on Angular to synchronize the DOM with my array, and not have any animation on the bounce back.

[sean-perkins]

@byronigoe thanks for reporting this issue. I am seeing the same behavior you describe.

The reorder logic is moving the Angular comment reference that Angular uses for injecting nodes added to the *ngFor. We will likely need to update our reorder logic so that it only tracks and moves actual HTML elements or nodes with a tag name.

We will capture this as a bug and prioritize in an upcoming sprint.

[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.