clauderic
[experimental] useSortable breaks when dragging subitems from one group to another
I've been trying to recreate a drag and drop solution with nested sortable items.
The data is in a nested structure, with items and subitems.
[
{
"id": "1",
"name": "Item 1",
"data": [
{ "id": "3", "name": "Subitem 1" },
{ "id": "4", "name": "Subitem 2" }
]
},
{
"id": "2",
"name": "Item 2",
"data": [
{ "id": "5", "name": "Subitem 3" },
{ "id": "6", "name": "Subitem 4" }
]
}
]
Each time the list is re-sorted, I want to save the new order in useState.
Reproduction
https://codesandbox.io/p/sandbox/7zl6wj
Sorting items works. Sorting subitems within an item works, but dragging a subitem to another item breaks react with the error message Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node. in Webpack and NotFoundError: The object can not be found here. in Vite.
I can see that in the guide for Multiple sortable lists reordering is done with a separate index array state. This could probably work, but I feel like my use-case is pretty common.
Furthermore, in production mode this all seems to work. I think that if there was a way to suppress this error things would be fine.
I've tried using preventDefault on onDragOver, but this loses a lot of the benefit to having the library handle sorting.
FWIW I managed to get something working by handling all state changes in onDragOver and using preventDefault inside to manually handle the changes
Having the exact same problem. Whenever I'm moving an item (subitem in your case) to a different column (item in your case), I get the same error.
I feel there should be an example in the documentation dealing with nested and/or separated arrays, as that is the most used structure for multiple-sortable-lists.
I know we're using an experimental version of the library, but if this isn't sorted, it is kind of useless as of now.
Nested
const nested = [
{
id: "col_1",
title: "Column 1",
items: [
{
id: "item_1",
title: "Item 1"
},
{
id: "item_2",
title: "Item 2"
}
]
},
{
id: "col_2",
title: "Column 2",
items: [
{
id: "item_1",
title: "Item 1"
},
{
id: "item_2",
title: "Item 2"
}
]
}
]
Separated
const columns = [
{
id: "col_1",
title: "Column 1"
},
{
id: "col_2",
title: "Column 2"
}
]
const items = [
{
id: "item_1",
title: "Item 1",
columnId: "col_1"
},
{
id: "item_1¨2",
title: "Item 2",
columnId: "col_1"
}
]
Experiencing the same issue. In my case the difference is that the state is being persisted in the server. When the request finishes updating changes in backend and items get refetched, the same error is thrown in frontend.
The same error seems to have occurred when I manually processed the state change.
