react-component / react-component/tree
Tree crashes on mount with `Cannot read properties of null (reading 'scrollTo')` when a node title contains an autoFocus input
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 1.3k
- Forks
- 490
- Avg merge
- 3d 17h
- Merged PRs (30d)
- 5
Description
What happened
We render an inline editor (a text input with autoFocus) inside a tree node's title — a common inline-rename pattern. Mounting the tree crashes the entire React root:
TypeError: Cannot read properties of null (reading 'scrollTo')
at Tree.scrollTo (Tree.js)
Because the error is thrown from React's focus event dispatch during the commit, it escapes any local error handling and unmounts the whole application root, not just the tree. We hit this in production via antd's Tree, which wraps this package; TreeSelect and Cascader share the same code path.
Reproduction
import Tree from '@rc-component/tree';
// Mounting this crashes the React root:
<Tree treeData={[{ key: 'a', title: <input autoFocus /> }]} />
- Render a
Treewhere any node'stitlecontains an element withautoFocus(or anything that focuses inside a row during the commit). - The input's focus bubbles to the tree container, the tree's focus activation runs
scrollTo, andlistRef.currentisnullat that moment → crash.
Why the ref is null
NodeList's useImperativeHandle has no dependency array, so on every commit the handle is detached during the mutation phase and re-attached in the layout phase. autoFocus focuses the input between those two, so the bubbled focus-activation dereferences a null listRef. First mount is the simplest trigger, but any re-render has the same window.
Versions
@rc-component/tree1.2.4 → 1.5.0 (current) — call sites unguarded in all- React 19, reproduced in jsdom and real browsers
Fix
Proposed in #1067 — optional chaining on the two listRef.current.scrollTo call sites, plus a regression test that reproduces the crash on first mount.
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start in Tree.js at Tree.scrollTo and trace the NodeList ref lifecycle described in the issue. Use the provided autoFocus reproduction as the first check, then run or add the regression test mentioned; it is done when first mount no longer crashes and the test covers that case.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend, testing-qa
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Active
- Clarity
- Clearly specified
- Newbie friendliness
- 55/100