grapoza / vue-tree

Tree components for Vue 3
MIT License
95 stars 12 forks source link

Expandable node with async loaded children should remain expandable when empty #287

Closed monfortm closed 11 months ago

monfortm commented 1 year ago

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

When an expandable node that loads its children asynchronously is finally expanded but happen to have no children, the "expandability" status changes (i.e. the consequence is that the expand icon disappears). IMO, this feels weird, as one can believe an error occurred when it did not. I'd much prefer some empty placeholder or just nothing but keeping the status of the node as expandable.

Describe the solution you'd like

See codesandbox, current, vs "empty node" behavior

Describe alternatives you've considered

See codesandbox, current, vs "empty node" behavior

Additional context

The workaround is easy, nothing needs to be implemented in v3! This is just a suggestion for the behavior, maybe in v5!

Cheers, M

grapoza commented 1 year ago

Yup, the nodes with async children have a kind of Schrodinger's Expandability, since we don't know if there are children or not. I probably won't change this in the tree itself, but there are two ways I've handled exact scenario in the past. Let me know if these make sense.

  1. Probably the easiest way is what I've done in this modified codesandbox, where a treeViewNodeChildrenLoad event handler checks to see if any children were loaded and adds that "<empty>" node if the child list is empty. This gives the result you simulated in the second node.
  2. If your API supplies a child count as part of the result you get for nodes, you can hoist the check up a level and handle that same treeViewNodeChildrenLoad (or the equivalent event for the root, treeViewRootNodesLoad) and for each node you just loaded see if it has children and manually update the node data.
grapoza commented 11 months ago

Closed due to inactivity.