minop1205 / react-dnd-treeview

A draggable / droppable React-based treeview component. You can use render props to create each node freely.
MIT License
516 stars 69 forks source link

ResizeObserver loop completed with undelivered notifications error when enableAnimateExpand is true #206

Open halbano opened 1 year ago

halbano commented 1 year ago

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:

  1. enableAnimateExpand flag
  2. 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

halbano commented 1 year ago

@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?

minop1205 commented 1 year ago

@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?

halbano commented 1 year ago

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.