react-spectrum icon indicating copy to clipboard operation
react-spectrum copied to clipboard

`getChildren` isn't implemented for `TreeCollection`

Open BenGladman opened this issue 9 months ago โ€ข 1 comments

Provide a general summary of the issue here

I'm trying to implement a menu using the useMenu hook. This requires me to use a tree state.

To get the child nodes of a section, if I try to use item.childNodes I get a deprecation warning. But the suggested alternative collection.getChildren(key) isn't implemented for TreeCollection. So as far as I can see there isn't currently any way of implementing this without triggering a warning.

๐Ÿค” Expected Behavior?

component below should show the O1 item:

function MyComponent() {
  const treeState = useTreeState({ 
    children: [<Section key="S1"><Item key="O1" /></Section>]
  });

  return (<pre>
    {[...treeState.collection.getChildren('S1')]}
  </pre>);
)

๐Ÿ˜ฏ Current Behavior

Component above crashes because getChildren is not implemented

๐Ÿ’ Possible Solution

implement getChildren on TreeCollection, or un-deprecate childNodes property on Node interface

๐Ÿ”ฆ Context

I'm trying to implement a menu using the useMenu hook.

๐Ÿ–ฅ๏ธ Steps to Reproduce

function MyComponent() {
  const treeState = useTreeState({ 
    children: [<Section key="S1"><Item key="O1" /></Section>]
  });

  return (<pre>
    {[...treeState.collection.getChildren('S1')]}
  </pre>);
)

Version

react-stately 3.36.1

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

Windows

๐Ÿงข Your Company/Team

No response

๐Ÿ•ท Tracking Issue

No response

BenGladman avatar Mar 31 '25 16:03 BenGladman

Could you do something like this: https://github.com/adobe/react-spectrum/blob/77b3442e4150116f3d35995b5a98b582d9e6f231/packages/%40react-spectrum/menu/src/MenuSection.tsx#L82 instead? Alternatively, if you are looking to implement something using RAC collections API you could emulate the RAC Menu implementation. We will be updating the hook docs in the future to use the RAC collections API to make this easier as well.

That being said, is there a particular reason you dropped to the hooks level here instead of using RAC Menu?

LFDanLu avatar May 22 '25 00:05 LFDanLu

Thanks @LFDanLu , getChildNodes works well.

BenGladman avatar Jul 07 '25 14:07 BenGladman