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

Unable to use with AntDesign

nosferatu500 opened this issue · comments

Describe the bug
Crash when trying to use <Dropdown><CustomNode/></Dropdown> (Dropdown from AntDesign)

To Reproduce

  • Wrap <CustomNode /> from this example
<Dropdown
    trigger={["contextMenu"]}
    overlay={buildMenu(node)}
>
    <CustomNode
    node={node}
    {...options}
    isSelected={selected}
    isDragging={selected && isDragging}
    onClick={handleClick}
    />
</Dropdown>
  • Click on tree item
  • Error with unable to read id is occur at next line:
    const selected = selectedNodes.some(
                 (selectedNode) => selectedNode.id === node.id
               );
    

Expected behavior
Should render Dropdown without crashing app.

For anyone who face the same issue:

The issue will be fixed if wrap <CustomNode> with <div>

Example:

<Dropdown
    trigger={["contextMenu"]}
    overlay={buildMenu(node)}
>
<div>
    <CustomNode
    node={node}
    {...options}
    isSelected={selected}
    isDragging={selected && isDragging}
    onClick={handleClick}
    />
</div>
</Dropdown>