Drag-and-Drop Malfunction in submission form

[Simone-Ramundi]

Describe the bug

When starting a new submission of an Item that has a field with the chips buttons (e.g 'dc.subject' for Publication) if the metadata has multiple values distributed into rows, the drag&drop functionality will not work between rows.

Screencast.from.08-11-24.17.25.32.webm

In DSpace, when using Angular Material’s drag-and-drop (cdkDropList) with cdkDrag in a multi-row layout, drag-and-drop functionality fails if items span more than one row. Specifically, when attempting to drag an item between rows, the intended swap does not occur, and items in other rows may shift unexpectedly. This issue limits the functionality to single-row layouts.

This issue arises because the current version (17.3.10) of Angular Material’s cdkDropList does not natively support multi-row. Support of multiple row has been added to Angular 18.

So for DSpace 9 the fix can be done when upgrading to Angular 18. While in DSpace 8, which uses an earlier Angular version, we need a custom fix.

To Reproduce

Steps to reproduce the behavior:

1. Go to sandbox.dspace.org and start a new Item submission in the "Articles" collection.
2. In the Describe section, under "Subject Keyword," add enough items to create multiple rows.
3. Attempt to drag an item from one row to another, and observe the bug as items shift incorrectly.

Expected behavior

Drag-and-drop functionality should work seamlessly across multiple rows, allowing users to swap items without causing other rows to shift.

[Simone-Ramundi]

@tdonohue 4Science will work on it