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

Open
#1,068 1 comment 0 reactions 0 assignees View on GitHub

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 /> }]} />
  1. Render a Tree where any node's title contains an element with autoFocus (or anything that focuses inside a row during the commit).
  2. The input's focus bubbles to the tree container, the tree's focus activation runs scrollTo, and listRef.current is null at 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/tree 1.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

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.