Drag and Drop on Mat-Dialog (Angular Material CDK) not working. Wrong previous and current index

Question

I have a list of themes, and each them has a list of colors. I display all the themes with a button that opens an Angular Dialog, in the dialog I list all the colors for that theme and these colors can be reordered @angular/cdk/drag-drop.

If I have a list with just 2-4 themes. I am able to reorder all the colors for each theme with no problem. But if I have a list with 20-30 themes. Only the first themes work fine, I can open the dialog and reorder the items, but if I chose one of the last items, the drag and drop does not work.

I tried to debug the error and found that the previous index and the current index have the same value when reordering is not working. For the ones working, the correct indexes are correct.

I build a simple app on StackBlitz where I can recreate the problem I'm having. You can try and click edit button for the first item of the list and see it works fine and you can reorder the colors, but try to reorder the last theme in the list and you will see it doesn't work. I see no errors in the console. I tried both with Chrome and Firefox and both have the same issue.

You can see also in the console the current and previous index each time you drag and drop a color.

Here is the link to the app.

Answer 1

Try to add this classes to your global CSS. I'm sure it will generate some temporary problems in the layout below the dialog but drag and drop should work fine

html.cdk-global-scrollblock {
  position: initial !important;
}

html.cdk-global-scrollblock body {
  position: fixed;
}