Tree: Lazy loaded tree crashes when using keyboard navigation (right arrow) to expand

[espentveit]

Describe the bug

Selecting a node, then pressing the right arrow button crashes the tree when the tree is lazy loaded. Issue occurs in demo as well.

Cannot read properties of undefined (reading 'children') at tree.esm.js:1094:1 at tree.esm.js:150:1

Code:

useUpdateEffect(function () {
    if (childFocusEvent.current) {
      var event = childFocusEvent.current;
      var nodeElement = event.target.getAttribute('data-pc-section') === 'toggler' ? event.target.closest('[role="treeitem"]') : event.target;
      var listElement = nodeElement.children[1];
      var childElement = listElement.children[0];  // crashes here
      nodeElement.tabIndex = '-1';
      childElement.tabIndex = '0';
      childElement.focus();
      childFocusEvent.current = null;
    }
  }, [expandedKeys]);

Reproducer

No response

PrimeReact version

10.5.1

React version

17.x

Language

TypeScript

Build / Runtime

Create React App (CRA)

Browser(s)

Chrome 121

Steps to reproduce the behavior

1. Click first node with children in a lazy loaded tree
2. Press the right arrow key on the keyboard to expand node
3. Crash

Expected behavior

The tree should expand the node instead of crashing

[melloware]

Thanks for reporting. Fixed for next release.

[espentveit]

Thank you for the fix.