Dynamically removing items from array seems to bug the sorting

[cosme-benito]

This is probably me doing something wrong but I can't figure how to properly do this. I just want to remove an item from the array which I assumed was as simple as

disableItem(item: any) {
    item.isEnabled = false;
    const index = this.enabledItems.indexOf(item);
    this.enabledItems.splice(index, 1);
  }

Unfortunately this seems to bug the ordering when dropping the FIRST element, it returns to normal after that. Below is a picture illustrating the behaviour.

Here is a very small stackblitz where you can reproduce the problem: https://stackblitz.com/edit/angular-exjr9b

Repro steps:

• Click on the X button for Obj 2, 3 and 4 from the right group

• Drag Obj2 from the left group into the right group, don't release/drop yet

• Drag Obj2 up and down the right list to reproduce a weird behaviour.

• Drop Obj 2 anywhere on the right list

• Drag Obj 3 and try to reproduce the same behaviour. It appears to be okay

This is probably something extremely simple that I'm just missing out. If you could point out the solution I'd appreciate it.

[cosme-benito]

Any updates regarding this issue?

[SpeedoPasanen]

I'm also seeing weird behavior on the very first time you drag. Could be from smooth-dnd, because after I drag something, then flip a flag which removes my whole component from the dom via *ngIf, flick the flag back so the containers are added back, everything works fine.