react-component / react-component/tree

Tree freezes when used in controlled mode with `motion` and `expandAction="click"`

Open
#684 0 comments 1 reaction 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

Hi,

When using rc-tree in controlled mode, with some animations (with the motion prop), and with expandAction="click", then the Tree gets stuck whenever you click on a leaf.
When that happens, you can no longer expand or collapse the nodes.
The only way out is to trigger a re-render of the Tree by some external event, such as a drag-and-drop or clicking a button that changes the tree state.

This can be really troubling for the end user, as they think the app is broken.

rc-tree-bug-expand-motion

Here is a codesandbox that reproduces the issue: https://codesandbox.io/s/lucid-frog-mks62z?file=/App.jsx

It is based on the basic-controlled example, to which I applied the following changes:

  1. Remove onCheck, checkedKeys, onSelect and selectedKeys props
  2. Add expandAction="click"
  3. Add motion={motion} with some style (from the animation example)

Steps to reproduce:

  1. Expand all nodes until you come to a leaf
  2. Click on the leaf title
  3. Nodes can no longer be expanded nor collapsed

rc-tree version: 5.7.0

Thanks for your help!

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 with the App.jsx reproduction in the linked CodeSandbox and compare it with the basic-controlled and animation examples. Trace the controlled expansion path when expandAction="click" and motion are both enabled, especially after clicking a leaf. Done means nodes can still be expanded and collapsed without an external re-render.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.