When trying to use a fixed position, the draggable objects are not well detected #959
Description
Expected behavior
When dragging over a position fixed droppable area the detection is not detected
Actual behavior
Detection is clearly detected
Steps to reproduce
<DragDropContext
onDragStart={() => setShowTrashZone(true)}
onDragEnd={onDragEnd}
<div style={{ display: 'flex', gap: 12, width: '100%', overflowX: "scroll" }}>
{stages.map(stage => (
<Droppable droppableId={stage.id} key={stage.id}>
{(provided: DroppableProvided, snapshot: DroppableStateSnapshot) => (
<div
className='bgPrimaryDark'
ref={provided.innerRef}
{...provided.droppableProps}
style={{
flex: 1,
minWidth: 230,
minHeight: 340,
borderRadius: 8,
padding: 8,
boxSizing: 'border-box',
opacity: snapshot.isDraggingOver ? 0.95 : 1,
}}
>
<div style={{ fontWeight: 600, color: '#fff', marginBottom: 8 }}>{title}</div>
{columns[tab.id].map((el, idx) => {
return <Draggable draggableId={String(el.id)} index={idx} key={el.id}>
{(provided: DraggableProvided, snapshot: DraggableStateSnapshot) => (
<div
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
style={{
width: '100%',
userSelect: 'none',
marginBottom: 8,
opacity: snapshot.isDragging ? 0.7 : 1,
background: '#CCEEEE',
borderRadius: 8,
boxShadow: snapshot.isDragging ? '0 2px 8px rgba(0,0,0,0.15)' : 'none',
boxSizing: 'border-box',
position: 'relative',
transform: 'none',
...provided.draggableProps.style,
}}
>
<div>random comp</div>
</div>
)}
</Draggable>
})}
{provided.placeholder}
</div>
)}
</Droppable>
))}
<Droppable droppableId={'trash'} key={'trash'}>
{(provided: DroppableProvided, snapshot: DroppableStateSnapshot) => {
return (
<div
style={{
display: 'flex',
padding: '10px',
visibility: showTrashZone ? 'visible' : 'hidden',
height: snapshot.isDraggingOver ? 150 : 150,
width: snapshot.isDraggingOver ? 150 : 150,
background: snapshot.isDraggingOver ? '#ffff00ff' : '#ffffff90',
border: '3px dotted black',
borderRadius: 4,
color: 'black',
zIndex: 2000,
position: 'fixed',
bottom: 40,
// left: '50%',
marginLeft: 850
// transform: 'translateX(-50%)'
}}
className='pempem-flex-row'
ref={provided.innerRef}
{...provided.droppableProps}
>
{/* {provided.placeholder} */}
<div className='pempem-flex'>
<div>trash</div>
</div>
</div>
);
}}
</Droppable>
</div>
</DragDropContext >
What version of @hello-pangea/dnd are you running?
"@hello-pangea/dnd": "^18.0.1",
What browser are you using?
chrome
Demo
When it's yellow it's supposed to be in the trash area.