Angular Drag and drop with filter

Question

I have an Angular application. which contains two drag and drop lists that are working fine. I want to add a filter to search for items inside the lists. The problem is when I filter items, the function transferArrayItem will use the wrong index and this is why it will move the wrong item.
I have added a stackblitz code to show the problem. To reproduce the problem please follow the steps:

1. over the first list click search and type number 2
2. try to move the item to the second list, it will move the item 1.

https://stackblitz.com/edit/angular-mwnmo5?file=src%2Fapp%2Fapp.component.ts

Answer 1

I finally found a way to solve the issue with the cleanest code. I am using id with cdkDropList to know the source list, then I am transferring the item manually instead of using the transferArrayItem function provided by cdkDragDrop.

the full code is in
https://stackblitz.com/edit/angular-htpgvx?file=src%2Fapp%2Fapp.component.ts