AnimateExpand Causes Height Lock and Failure to Reveal Children on Rapid Node Open/Close

[Olaf Visker]

Description
When using the AnimateExpand feature if you rapidly open and close a node this results in the droppable failing to reveal its children and it's height being locked to zero. This behavior is not exclusive to custom implementations and is reproducible in the basic examples provided on the documentation page (https://minop1205.github.io/react-dnd-treeview/?path=/docs/basic-examples-animateexpand--animate-expand-story).

To Reproduce

1. Navigate to the react-dnd-treeview basic examples with enableAnimateExpand.
2. Quickly open and close a node.
3. See that the droppable no longer reveals the children as the height is locked to zero.

Expected Behavior
When using enableAnimateExpand droppables should consistently reveal the children of a node regardless of the speed of node expansion and collapse actions.

Actual Behavior
The bug manifests as the droppable failing to display the children after rapid opening and closing of a node. This behavior persists even in the basic examples provided in the documentation.

bug.mp4

[Johannes Vallikivi]

Definitely a bug. As a workaround you can add a cooldown to the button as

  const [canClick, setCanClick] = useState(true);

  const handleToggle = () => {
    if (canClick) {
        onToggle();
        setCanClick(false);
        setTimeout(() => setCanClick(true), 700);
    }
  }

and/or you can dynamically adjust enableAnimateExpand when you detect rapid clicking.