Sort the list from outside the SortableList

[jortizsao]

Is your feature request related to a problem? Please describe.

It seems that the SortableList keeps its own internal order. Thus, the real order and the internal order are out of sync when sorting the list from outside (i.e not using drag-n-drop) once the component has been rendered. So sorting again using drag-n-drop after externally re-sorted, leads to unexpected behaviour.

Describe the solution you'd like

Maybe expose a function that can set the internal order from outside. Similar to swap in https://github.com/bmcmahen/react-grid-dnd

Thanks for the great library!

[ValentinH]

Thanks for opening this issue.

Indeed, having an internal order is unfortunate in this case as we end up having 2 sources of truth. 😞

I need to think about what the best API would be to handle this to ensure the internal array (used for tracking DOM nodes) is always reflecting the actual order of the SortableItems.

[ValentinH]

The first idea that comes to my mind and that would be easy to understand for the developer using the library is to require an index prop in the each SortableItem. Then, we can automatically update the internal state if one item changes.

[jortizsao]

The first idea that comes to my mind and that would be easy to understand for the developer using the library is to require an index prop in the each SortableItem. Then, we can automatically update the internal state if one item changes.

Maybe a key or id similar to how React uses for rendering a list of items? With that SortableItem key, it's possible to identify if an item has changed its position

[jortizsao]

Ok, I have been checking the source code more deeply and I think I get why you said to require the index since the SortableItem doesn't know its new position within the list.

However, from the interface/api perspective, I think it makes it more intuitive to use a key and then the library been able to manage the order from it, although with the current implementation seems more difficult to achieve this than using the index instead 😄

[ValentinH]

The thing is that key is reserved for React and is not visible to the component on which it is applied. The key is actually already required and used for all examples as you are usually using SortableItem inside a array.map() loop.

[ValentinH]

I think I found a fix that should work without changing the API 🎉 Please try v0.2.1 and tell me if it solves your issue 🙂

[jortizsao]

I think I found a fix that should work without changing the API 🎉 Please try v0.2.1 and tell me if it solves your issue 🙂

Yes, I can confirm it works. 🎉. Thank you so much. I had already forked the repo and started trying to fix but you were faster!