frontend-collective / react-sortable-tree

Drag-and-drop sortable component for nested data and hierarchies
https://frontend-collective.github.io/react-sortable-tree/
MIT License
4.9k stars 897 forks source link

new child is added to the parent when collapsing the parent #939

Open akhilatadi98 opened 1 year ago

akhilatadi98 commented 1 year ago

hi team i have a tree where in the sub childrens they have 2 sub children which are having the same id

parent 1 (id:1) ---child 1(id:2) --- child 12(id:3) -- child121(id:4) --- child(1211)(id:5) --child 2(id2) --child 21(id:4) -- child 212(id:5)

when we closed the child121 we expected to hide the child1211 but its not hiding

we are using the changeNodeAtPath to update the tree

gaeundev commented 3 months ago

I also had a hard time with this problem, and I solved it using path!

<SortableTree
   {...props}
   getNodeKey={({ node }) => node.id.toString()}
   onVisibilityToggle={(args) => {
       const { matches } = find({
           treeData: treeData,
           getNodeKey: (data) => data.node.id.toString(),
           searchMethod: (data: SearchData<DataListItemT>) => {
              return data.path.includes(args.node.id.toString());
        }});

        if (matches.length > 0) {
              for (const match of matches) {
                 match.node.expanded = args.expanded;

                 setTreeData((prev) => {
                     const changeNode = changeNodeAtPath<DataListItemT>({
                         treeData: prev,
                         path: match.path,
                         getNodeKey: (data) => data.node.id.toString(),
                         newNode: { ...match.node },
                     });

                     return changeNode;
                  });
              }
        }
   }}
/>

Because your tree nodes have duplicate ids, The question and the function of searchMethod may be different, but I think you can easily solve the problem by using path!

hope this helps