Describe the bug
In my code I have vertical stack of sections which are drop targets. Once the page is rendered, I deleted one of the section (not the last one). Now I drag and drop the object, to the section next to the deleted section. But the actual drop happens on the deleted section. Hover works fine and shows the right drop target. It is easy to reproduce. Sample code attached.
Reproduction
Code attached
=================
import { useState } from "react";
import { DndProvider } from "react-dnd";
import { HTML5Backend } from "react-dnd-html5-backend";
import { useDrag, useDrop } from 'react-dnd'
const data = [
{ name: 'Section 1', rows: [{ name: 'Section 1, Row 1' }, { name: 'Section 1, Row 2' }, { name: 'Section 1, Row 3' }] },
{ name: 'Section 2', rows: [{ name: 'Section 2, Row 1' }, { name: 'Section 2, Row 2' }, { name: 'Section 2, Row 3' }] },
{ name: 'Section 3', rows: [{ name: 'Section 3, Row 1' }, { name: 'Section 3, Row 2' }, { name: 'Section 3, Row 3' }] },
{ name: 'Section 4', rows: [{ name: 'Section 4, Row 1' }, { name: 'Section 4, Row 2' }, { name: 'Section 4, Row 3' }] },
]
function Row(props) {
const [{ isDragging }, drag] = useDrag(() => {
return {
type: 'TableRow',
item: props.row,
collect: monitor => ({
isDragging: !!monitor.isDragging(),
}),
end: (item, monitor) => {
if (monitor.didDrop()) {
console.log('Dropped');
}
}
}
})
return (
<div ref={drag} style={{ margin: 4, padding: 4, border: '1px solid #CCC' }}>
<div style={{ color: '#999' }}>{props.data.name}</div>
</div>
)
}
function Section(props) {
const [{ isOver, droppedItem }, drop] = useDrop(() => {
return {
accept: 'TableRow',
drop: (v, c) => {
_droppedTo(v);
},
collect: monitor => ({
isOver: !!monitor.isOver(),
droppedItem: monitor.getItem()
}),
}
}, [])
const _droppedTo = (v) => {
console.log("Dropped to "+props.section.name);
}
if(isOver) {
console.log("Hovering on "+props.section.name);
}
return (
<div ref={drop} style={{ margin: 10, padding: 10, boxShadow:isOver ? '1px 1px 3px rgba(0,0,0,0.4)' : '',
border: isOver ? '2px solid #00ff00' : '1px solid #DDD' }}>
<div style={{ Color: '#0000FF', marginBottom: 5 }}>{props.section.name}</div>
<div>
{props.section.rows.map((row, key) => {
return (
<Row key={key} data={row} />
)
})}
</div>
</div>
)
}
export default function DndTestCase(props) {
const [state, setState] = useState({
});
const _onDelete = () => {
data.splice(2, 1);
setState({ ...state });
}
return (
<DndProvider backend={HTML5Backend}>
<div style={{ width: '100%', height: '100vh', backgroundColor: '#FFF', padding: 20 }}>
<div>
<div onClick={_onDelete} style={{
cursor: 'pointer', border: '1px solid #CCC', justifyContent: 'center', alignItems: 'center', display: 'flex',
width: 200, height: 30, backgroundColor: '#EAEAEA', color: '#000'
}}>Delete Section</div>
</div>
{data.map((section, key) => {
return (
<Section key={key} section={section} />
)
})}
</div>
</DndProvider>
)
}
=================
Steps to reproduce the behavior:
- Click the 'Delete Section',. which will delete section 3
- Drag a row from section 1 and drop to section 4.
- The drop happens on deleted section 3. See the console output
Expected behavior
Drop should not happen on deleted node. It should be same as the node shown on hover.
Screenshots
Code attached
Desktop (please complete the following information):
- OS: [e.g. iOS]
- Browser [e.g. chrome, safari]
- Version [e.g. 22]
Additional context
Add any other context about the problem here.
1.3k Dec 30, 2022
7 Nov 14, 2022
142 Sep 26, 2022
18.7k Jan 7, 2023
6.5k Jan 7, 2023
143 Dec 28, 2022
45 Dec 30, 2022
51 Sep 21, 2022
27 Nov 27, 2022
5 Sep 23, 2022
976 Nov 26, 2022
52 Dec 8, 2022
45 Aug 26, 2022
9.4k Jan 2, 2023
1 Nov 5, 2021
37 Dec 16, 2022
13 Nov 7, 2022