Tree["nodeRenderer"] has hidden requirement to forward ref to underlying TreeNode

[saskliutas]

Describe the bug (current behavior)

If Tree["nodeRenderer"] renders some component that wraps TreeNode there is an error logged in a console: Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef().

Also in virtualized small Tree spacing between nodes are off.

There is no mention that component rendered in Tree["nodeRenderer"] should forwardRef to the wrapped TreeNode component.

Expected Behavior

It should be documented that ref will be passed to the component rendered by Tree["nodeRenderer"] and if wrapper component is rendered it should forwarf ref to TreeNode.

Link to minimal repro

https://stackblitz.com/edit/github-c2ek3e?file=src%2FApp.tsx

Steps To Reproduce

1. Open sandbox.
2. Observe error in console
3. Observe too big spaces between tree nodes
4. Replacing TreeNodeRenderer with FixedTreeNodeRenderer on line 114 resolves these issues

Package Version

• I'm using the latest version of iTwinUI.

Anything else?

No response

[r100-stack]

Thanks for reporting this! Looks like this is happening because when the Tree is virtualized, we clone the returned value of the nodeRenderer() function and add some additional virtualization related props, including ref.

So, that React error will not come if nodeRenderer directly returns the TreeNode (like in our examples) but will come when nodeRenderer returns a component that then returns a TreeNode (like in your sandbox). This is because the wrapper component now gets the ref because of the cloning and so needs to forward it to TreeNode.

The styling issue was happening because the TreeNode was not getting the ref and so there were some virtualization related measurement issues. This will be fixed if the ref is forwarded.

---

We will update the JSDocs to highlight this and also mention it on our soon to be released docs for Tree.

[smmr-dn]

This has been documented in the Tree JSDoc and documentation which is soon to be published 😄