Expected to find a valid target. #857
Description
This is reproducible by simply using the Tree-to-tree dragging example in development mode.
How: Select a node to copy/move to the last position of another tree and drag it a little bit more under that.
Reason: It is looking for a targetId which is not there. If the last valid target id is T3, this will cause the dnd to look for a targetId of T5, which is not there. DragDropMonitorImpl.js is where I debugged this.
Example:
Source Code:
import React, { Component } from 'react';
import SortableTree from 'react-sortable-tree';
// In your own app, you would need to use import styles once in the app
// import 'react-sortable-tree/styles.css';
class App extends Component {
constructor(props) {
super(props);
this.state = {
treeData1: [
{ title: 'node1', children: [{ title: 'node 1.1' }] },
{ title: 'node2' },
],
treeData2: [{ title: 'node3' }],
shouldCopyOnOutsideDrop: false,
};
}
render() {
// Both trees need to share this same node type in their
// `dndType` prop
const externalNodeType = 'yourNodeType';
const { shouldCopyOnOutsideDrop } = this.state;
return (
<div>
<div
style={{
height: 350,
width: 350,
float: 'left',
border: 'solid black 1px',
}}
>
<SortableTree
treeData={this.state.treeData1}
onChange={treeData1 => this.setState({ treeData1 })}
dndType={externalNodeType}
shouldCopyOnOutsideDrop={shouldCopyOnOutsideDrop}
/>
</div>
<div
style={{
height: 350,
width: 350,
float: 'left',
border: 'solid black 1px',
}}
>
<SortableTree
treeData={this.state.treeData2}
onChange={treeData2 => this.setState({ treeData2 })}
dndType={externalNodeType}
shouldCopyOnOutsideDrop={shouldCopyOnOutsideDrop}
/>
</div>
<div style={{ clear: 'both' }} />
<div>
<label htmlFor="should-copy" style={{ fontSize: '0.8rem' }}>
Enable node copy via <b>shouldCopyOnOutsideDrop</b>:
<input
type="checkbox"
id="should-copy"
value={shouldCopyOnOutsideDrop}
onChange={event =>
this.setState({
shouldCopyOnOutsideDrop: event.target.checked,
})
}
/>
</label>
</div>
</div>
);
}
}
export default App;