Giters

lukasbach / react-complex-tree

Unopinionated Accessible Tree Component with Multi-Select and Drag-And-Drop

Home Page:https://rct.lukasbach.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Multiple controlled trees with live data loosing registered tree affecting drag and drop sometimes.

CraigDeverall opened this issue · comments

commented

Bug Description
When using multiple controlled trees that are driven by dynamic data and dragging and dropping on the first tree in dom. Sometimes the component can get into a state where the linearItems for the first tree are not present and this causes an error when dragging over items.

Uncaught TypeError: Cannot read properties of undefined (reading 'length')
at Object.eval [as current] (useOnDragOverTreeHandler.js:67:1)
at Object.eval [as onDragOverTreeHandler] (use-stable-handler.js:11:1)
at onDragOver (TreeManager.js:44:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1)
at invokeGuardedCallback (react-dom.development.js:4056:1)
at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:4070:1)
at executeDispatch (react-dom.development.js:8243:1)
at processDispatchQueueItemsInOrder (react-dom.development.js:8275:1)
at processDispatchQueue (react-dom.development.js:8288:1)

In my case I am expecting a 'mainTree' (the first tree child) to also be present here:
image

I have tried and failed to checkout the repository and build react-complex-tree locally and link it to my project to debug unfortunately. I had wanted to investigate the setTimeout in UseControlledTreeEnvironmentProps.ts

image

To Reproduce

  • Use a ControlledTreeEnvironment.
  • Using live data from the database, changes in the tree save the data to backend and update the treeData passed to ControlledTreeEnvironment
  • I have 3 Tree components nested inside this ( all using different roots of the same data)
  • It doesn't happen initially, but after a subsequent render (ie change one of the treeRoots of the 2nd or 3rd trees and re-render after a item clicked action from the mainTree)
  • Drag and drop on the first child tree. Notice that it causes errors above.

Expected behaviour
That the mainTree linearItems would still be there and that this error wouldn't occur in this situation.

On MacbookPro using Chrome.

Unfortunately I can't share my exact code, I will try to spend some time reproduce this in a sandbox.

commented

Another clue I noticed is that prior to this happening there is an 'undefined' tree unregistered.
I could see this after logging like this:
image

commented

Hey, thanks for your report! Can you provide maybe an "anonymized" version of the code that creates the RCT instance, i.e. the react components for the tree and the tree environment? To me it looks like there are some inconsistencies in how the tree IDs are maintained by or provided to RCT.