React-sortable-tree: Dropping parent node to its child throws an error (even in storybook)

Created on 18 Mar 2020  路  6Comments  路  Source: frontend-collective/react-sortable-tree

It happens in each of the storybook examples when you try to drag parent node into child.

image

image

Most helpful comment

URGENT BUG

I have the same problem like @radulle and it looks like a general drag and drop bug in the library.
I can also reproduce the bug in your storybook.
Here is a description how to reproduce the bug in your storybook:

  1. open the "Add and remove nodes" Example (It also works with other examples)
  2. Add 2 children to "Karl" and 2 children to "Peter"
  3. Both have to be expanded
  4. Drag "Karl" inside a red signed part of "Peter" and drop it there

This is a screenshot of the Error in your Storybook with Chrome browser:
2020-04-06 13_35_07-Fotos

And this is a screenshot from the more explicit error in my running project:
2020-04-06 13_42_25-Devicelist

I would appreciate if you could fix this bug as fast as possible, because at the current state we can't use the library for our project.

Thank you in advance for your efforts.

All 6 comments

URGENT BUG

I have the same problem like @radulle and it looks like a general drag and drop bug in the library.
I can also reproduce the bug in your storybook.
Here is a description how to reproduce the bug in your storybook:

  1. open the "Add and remove nodes" Example (It also works with other examples)
  2. Add 2 children to "Karl" and 2 children to "Peter"
  3. Both have to be expanded
  4. Drag "Karl" inside a red signed part of "Peter" and drop it there

This is a screenshot of the Error in your Storybook with Chrome browser:
2020-04-06 13_35_07-Fotos

And this is a screenshot from the more explicit error in my running project:
2020-04-06 13_42_25-Devicelist

I would appreciate if you could fix this bug as fast as possible, because at the current state we can't use the library for our project.

Thank you in advance for your efforts.

If you move a child (with children) to the valid zone of the nextParent and, without dropping, you move from that valid zone of the parent to a non-valid (red area) zone, you got this error
captured

i think this bug is just reproducable , if the node you move has children

see: https://stackblitz.com/edit/tree-bug-playground

I also encountered the same problem

@radulle & @as882301 I found a workaround that could help you too.
First: I use the FileExplorerTheme that alone makes the bug a little better.
Second: I collapse the draged folder in the onDragStateChanged when the user starts dragging.
This way you should be able to work with the library without getting errors.

But I still hope for the developers to fix it!

Due to inactivity of the collective, I made my own fork and release here: https://github.com/lifejuggler/react-cat-tree do you mind if I apply the fix there? I am doing this so that you can just do a npm version update instead of using hot-fix branch

Got same issue... Hope it will be fixed soon.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

mcolburn picture mcolburn  路  4Comments

theonelucas picture theonelucas  路  3Comments

CrazyCodingBanana picture CrazyCodingBanana  路  4Comments

29er picture 29er  路  5Comments

oarashi picture oarashi  路  5Comments