[bug report] Wrong order when adding item to the end of list in Ivy-compiled code

[stefda]

• My issue title starts with [bug report]
• I have read the README, especially the 'classic blunders' section, and the dragula docs.
• I have searched through the ng2-dragula issues for related problems, including closed issues.
• I have browsed through the issues labeled "future reference" for problems that have been solved before or have a known workaround.
• I am using the latest version of ng2-dragula.

Describe the bug

In the component below, the button adds a new item to the draggable list. The expected behaviour is that the new item is added the end of the list. It works as expected until any item is dragged and dropped to the end of the list. Once that happens, the new item is no longer appended to the end of the list but rather to the previous location of the dragged and dropped item.

@Component({
  selector: 'app-test',
  template: `
    <ul dragula="ITEMS" [(dragulaModel)]="items">
      <li *ngFor="let item of items">{{item.title}}</li>
    </ul>
    <button (click)="onButtonClicked()">Add New Item</button>
  `,
})
export class TestComponent {
  public items = [
    {
      title: 'Item 1',
    },
    {
      title: 'Item 2',
    }
  ];

  public onButtonClicked(): void {
    this.items.splice(this.items.length, 0, { title: `Item ${this.items.length + 1}` });
  }
}

To Reproduce

Steps to reproduce the behaviour:

1. Open a page with the component above in a project with Ivy enabled
2. Drag and drop the first item in the list
3. Click on the "Add New Item" button
4. The new item is added at the previous position of the first item instead of the end of the list

Versions

Please state which versions of the following packages you have installed:

• @angular/core: 8.2.9
• ng2-dragula: 2.1.1

Additional context

This bug only occurs in Angular code compiled with Ivy.

[prashant-sajjan]

Even I am facing similar issue. I have posted this issue in Stack OverFlow
https://stackoverflow.com/questions/63532041/ng2-dragula-after-adding-new-item-its-getting-displayed-at-the-top

[thomas-matthew-wood]

I am also having the same issue and came here from SO, I have duplicated it in a stackblitz.

https://stackblitz.com/edit/ng2-dragula-base-ykm8fz?file=src/app/app.component.html

[alexzuza]

As a possible workaround you can revert position:

constructor(private dragulaService: DragulaService) {
  this.subscription = this.dragulaService.drop().subscribe(({ name }) => {
    this.dragulaService.find(name).drake.cancel(true);
  });
}

https://stackoverflow.com/questions/63532041/ng2-dragula-after-adding-new-item-its-getting-displayed-at-the-top/63609337#63609337

[prashant-sajjan]

@alexzuza - I see items getting added in right order. Thanks for the solution

[ignaciostellino]

Even I am facing similar issue. I have posted this issue in Stack OverFlow https://stackoverflow.com/questions/63532041/ng2-dragula-after-adding-new-item-its-getting-displayed-at-the-top

@alexzuza This is not working if you drag but not drop and return to the original position. Then click on add a new item and the new item is added in a wrong order