minop1205 / react-dnd-treeview

A draggable / droppable React-based treeview component. You can use render props to create each node freely.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

ResizeObserver loop completed with undelivered notifications error when enableAnimateExpand is true

halbano opened this issue · comments

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

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