react-dnd-treeview
react-dnd-treeview copied to clipboard
ResizeObserver loop completed with undelivered notifications error when enableAnimateExpand is true
Describe the bug As the title says, we are facing the following runtime error:
Uncaught runtime errors:
ERROR
ResizeObserver loop completed with undelivered notifications.
at handleError
It's only happening when the enableAnimateExpand prop is set to true, otherwise, everything goes well.
I have a toggle component, that causes the hierarchy within the layers panel to re-render, after the re-rendering happens, the error gets triggered.
Here's how I am using the Tree component, it is a very similar use case than this example: https://minop1205.github.io/react-dnd-treeview/?path=/docs/basic-examples-manual-sort-with-placeholder--manual-sort-with-placeholder-story
<div
onMouseEnter={handleOnMouseEnterNode}
onMouseLeave={handleOnMouseLeaveNode}
>
<DndProvider backend={HTML5Backend}>
<Tree
tree={treeData}
rootId={0}
render={(node, { depth, isOpen, onToggle }) => (
<CustomNode
node={node}
depth={depth}
isOpen={isOpen}
parentHovered={hover}
onToggle={onToggle}
/>
)}
onDrop={onDropHandler}
classes={{
root: 'tree-root',
listItem: 'list-item',
draggingSource: 'dragging-source',
placeholder: 'placeholder-container',
}}
sort={false}
insertDroppableFirst={false}
initialOpen={memoizedIds}
enableAnimateExpand={true}
canDrop={() => false}
canDrag={() => false}
dropTargetOffset={10}
/>
</DndProvider>
</div>
To Reproduce Steps to reproduce the behavior:
- enableAnimateExpand flag
- Cause the main component to re-render for example using a random key when pressing a button in the DOM
Expected behavior It should re-render and re-calculate the hierarchy without firing the error
@minop1205 Hey, any thoughts or guess about the reason behind the issue? Any possible workarounds to memoize the tree component and avoid re-rendering it in some scenarios?
@halbano Thanks for the report.
I tried to reproduce it in my development environment, but could not.
To address this issue, I would like to reproduce the phenomenon first. Is it possible to provide a simple sample in a code sandbox or similar?
Hello @minop1205, we have disabled the animation for now as a temporary solution. I'll be busy for a bit wrapping up the functionality that we need to ship, and then I'll be back with a sandbox environment (asap).
One extra comment: It would be great to know that your library provides a set of utils (exports in the utils file). Some of them were useful for me during the implementation, and I found them when I cloned the repo locally to inspect the implementation details.