search

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

Placeholder doesn't show up when the Parent has no child. #220

Open DavidRnR opened 7 months ago

DavidRnR commented 7 months ago

I'm working in a real project using this awesome library. Thank for your work @minop1205 and all the community.

There is a bug when the Parent has not got any child, so the placeholder doesn't show up. It's not visible. But, I can drop the node anyways.

To Reproduce Steps to reproduce the behavior:

  1. Go to the official example https://codesandbox.io/p/sandbox/placeholder-js-bvev61
  2. Set a folder without children.
  3. Try to drag a node to this folder.
  4. Placeholder (blue line) does not show up but you can drop the node anyways, which it's fine.

Expected behavior Placeholder should shows up when the parent has no children and the node is allowed to drop.

Video demo https://github.com/minop1205/react-dnd-treeview/assets/21180828/aee8b2f4-24c9-4efa-8043-b92c57b6f5bc

Maybe "visible" is not right? image

Thank you.

DavidRnR commented 5 months ago

Waiting for the fix on https://github.com/minop1205/react-dnd-treeview/pull/222

Thank you.

marcvangend commented 5 months ago

This is indeed a bug. I was able to implement a workaround by passing the hasChild and isDropTarget render props to the parent component and rendering it there myself:

{!hasChild && isDropTarget && (
  <div style={{ position: "relative" }}>
    <Placeholder />
  </div>
)}

(The position:relative wrapper being necessary because Placeholder contains position:absolute styling.)