Treeview and Selection

[lienas]

I implemented a treeView based on the following code:
https://github.com/adobe/react-spectrum/blob/main/packages/%40react-stately/tree/stories/useTreeState.stories.tsx

I added some keyboard navigation for expand/collapse and changed behavior of usePress to only select a Node instead of expand/collapse and select!

So my code looks the following:

let {pressProps} = usePress({
     ...itemProps,
     ...keyboardProps,
     onPress: (e) => {
         state.selectionManager.toggleSelection(node.key);
     },
 });

But now when selecting with the mouse the node is selected and immediately deselected!!
Sandbox: https://codesandbox.io/s/strange-albattani-i1k05k?file=/src/treeBox.tsx

I also would like to select childs programmatically when a parent is selected. I tried in the onPress callback to check if the pressed Node has child-nodes an call sth. like

 if (isSelected) {
      for (let child of node.childNodes) {
          state.selectionManager.extendSelection(child.key);
      }
  }

But that ended up in an unpredictable behavior (I guess due to asynchronus status-update?).
How should I implement this behavior?

[snowystinger]

Quick glance, I think you've doubled/tripled up on some listeners, you've sent itemProps into usePress and spread the result on the outer most Box, but then you've also spread itemProps again on the next Box, and then it's again spread onto the Box for expanded.

Try breaking some of that up into more specific handlers. You can call usePress multiple times if needed.

[lienas]

Sorry- I already recognized that. I updated the Codebox, but that does not solve the issue!

[snowystinger]

I think maybe you haven't saved then? or maybe forked it? It'd be helpful to work with the updated code if you don't mind. Thanks!

[lienas]

Forgot to save - I have fixed that !

[snowystinger]

Here, I think this will help you https://codesandbox.io/s/dreamy-goldwasser-i2wu1f?file=/src/treeBox.tsx
Some points:

• extendSelection is really for a list, it might work in trees, but it might make more sense to handle it yourself. Using setSelectedKeys will replace the current set of keys with whatever new set you create.
• mergeProps will chain event handlers together, you had some conflicts where itemProps/keyboardProps would conflict, as well as onPress itself
• using usePress will prevent events from bubbling, so if you use it on the arrow icon, it will prevent those events from getting to the row, so clicking the arrow won't select the row anymore
• getChildNodes is for building the tree, and childNodes only appear when displayed, so you need to handle figuring out child nodes to add to the selection yourself instead of relying on what in the state

let me know if you have any more questions

[lienas]

Thanks a lot for your support - works perfect now!