Drag-drop in arrays does not work in version 6

[erkkah]

Describe the bug

Drag-n-drop of array items does not work after upgrading from version 5 to version 6. The drag is indeed initiated, but there are no hovering effects or results when dropping.

Installed libraries and their versions

• adminjs@6.1.1
• @adminjs/koa@3.0.0
• adminjs-graphql@3.0.0

To Reproduce Try to reorder the elements of an array property. Make sure the property has isArray and isDraggable set to true.

Expected behavior I expect to get hovering fx like in version 5, and that the item moves to the new position on mouse release.

Desktop (please complete the following information if relevant):

• OS: OSX
• Browser chrome, safari

[dziraf]

It looks like I introduced this bug in 6.1.0.

I switched from react-beautiful-dnd to react-dnd because it looks like Atlassian stopped developing react-beautiful-dnd and it's not updated for React v18. However, react-dnd has worked fine for me locally, I'll see what's wrong today.

[dziraf]

@erkkah Please try version 6.1.3

[erkkah]

Great, that fixed it! Thank you for the fast response!

[erkkah]

Sorry, I was too fast. References in arrays do not work still.

There are two issues here. First - after performing a drag-drop operation, all items pop into their previous place, but saving stores the actual reordered state. It looks like there is a difference in how populated properties are updated.

Second - clicking the reference select box does not work when isDraggable is set. There is some issue with focus. Clicking the down-chevron button does bring up the select list, and kind-of sets focus, so that I can type, but there is no cursor and arrow buttons do not work.

[dziraf]

@erkkah are you able to record a video so that I know what to look at? Also, I assume it'd worked correctly pre v6?

[erkkah]

The first one is not new - my bad, so that's a separate issue. The second is a regression from 5 to 6.

https://user-images.githubusercontent.com/6250348/186162695-006bc0f8-e011-4eee-8964-6943326dbb26.mov

https://user-images.githubusercontent.com/6250348/186162728-74a25720-378a-422c-a765-6e404c1ddb06.mov

[wdfinch]

Hi, this is a little unrelated, but are there any docs or tutorials on how to do something like this? I couldn't find anything refreshing drag and drop don't the website.

[dziraf]

@erkkah The bug with label not updating after reordering elements should now be fixed (6.1.4).

The second one might've been partially fixed or I cannot reproduce it fully (see the video). https://user-images.githubusercontent.com/16668924/186389360-b2ba48de-ba74-426e-9958-13dca4f7d508.mov

The issue where pressing the value container does not open the dropdown is caused by: https://github.com/hello-pangea/dnd/blob/main/docs/api/draggable.md#interactive-child-elements-within-a-draggable- I currently have no way of fixing this. The second problem where choosing a value would reset input looks to be fixed to me.

@wdfinch We're using @react-forked/dnd and full code for it is here: https://github.com/SoftwareBrothers/adminjs/blob/master/src/frontend/components/property-type/array/edit.tsx In order to enable it, your property must have isArray: true and isDraggable: true options.

[erkkah]

@dziraf - I've verified the fix on our end, and it seems to work well in 6.1.4.

Just one thing - the "reordering of references" - fix needs to be duplicated in custom components for reference types (we happen to have one of those). No biggie, but it does feel a bit odd that the "populated" fields are out of sync with "params" after reordering.

Thanks again!

[dziraf]

@erkkah I don't think we have a reactive way to update populated in the frontend but I didn't want to burn too much time on this either since we're rewriting the frontend for v7.

[erkkah]

I'm happy.