Skip to content

Bug: Drag and Drop not working inside MatDialog (wrong previous and current index) #15880

Closed
@betancourtc

Description

@betancourtc

What is the expected behavior?

Reorder items in a list inside Mat-dialog using Angular Material Drag and Drop.

What is the current behavior?

Drag and drop does not work properly on the last items of the list. Previous and current index are the same in the moveItemInArray function

What are the steps to reproduce?

I have an array, where each item contains a list of colors. Clicking the edit button opens an Angular Material Dialog with the list of colors (for that item). The colors can be reordered using drag and drop. The list of colors from the first items of the list work fine, but when trying to reorder the list of colors in the last items of the list, drag and drop does not work. I did some debugging and found out that for the items not working, the event passed to the moveItemInArray, has the same number for the current and the previous index.

As previously mentioned, click on the edit button for one of the first items in the list and try reordering the colors, it works fine, choose the last item in the list and you will see the colors cannot be reordered, take a look at the console to get the previous and current indexes.

StackBlitz starter: https://stackblitz.com/edit/angular-u6dt7a

Not sure whether this is a CDK or a Mat-Dialog dialog.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular 7, Angular Material 7.3.7
Chrome, Firefox

Is there anything else we should know?

When reducing the list of items to just a couple of them, then all list of colors for all items work fine. Problem starts when the list of items starts to grow in number.

Metadata

Metadata

Assignees

No one assigned

    Labels

    P4A relatively minor issue that is not relevant to core functionsarea: cdk/drag-drop

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions