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

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

DavidRnR opened this issue · comments

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.

Waiting for the fix on #222

Thank you.

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