expand/collapse all nodes with useTreeState

[lienas]

I added 2 Buttons in my tree-view based on useTreeState to programmatically expand and collapse all nodes.

This is my code:

export const expandAll = (state: TreeState<any>) => {
    console.log("expand:", state.collection);
    for (let node of state.collection ) {
        if (!state.expandedKeys.has(node.key)) {
            state.toggleKey(node.key);
        }
    }
}

Button-Code (Chakra-UI):

<IconButton 
     aria-label={"expand"} 
     icon={<HiArrowSmDown/>} 
     onClick={() => expandAll(state)} 
     size={'sm'} mb={2} ml={1}/>

Unfortunately this does not work (only 1 node gets expanded.

[snowystinger]

If I recall correctly, state.collection will only have the "visible" keys since it's a collection and could theoretically have a lot of nodes, far more than you'd want rendered, non-visible nodes aren't included in the collection until their parents are expanded. You could add all the keys to the expanded keys set though and pass that in as a prop to useTreeState, thereby controlling the expanded states. You could also use defaultExpanded if you didn't want to make it controlled.

[lienas]

It seems not to be a visibility issue. I made a codesandbox where you can see the behaviour
https://codesandbox.io/s/goofy-cannon-iwok0k?file=/src/treeBox.tsx
When you click the expand/collapse buttons one node by one is expanded or collapsed !

[snowystinger]

Here's what I mean, https://codesandbox.io/s/cold-dust-y7s611?file=/src/treeAccessibleTreeview.tsx

[lienas]

Thanks again for your support. I will implement your approach to my component.