Open rendomnet opened 3 years ago
Okay I have found the reason but it is strange one. I have a container div around DragDropContext with style backdrop-filtter. And if I remove this style backdrop-filtter from container div. Bug disappears.
Any update about this issue? I'm facing the same problem, when i remove the backdrop-filter from my container div, the bug disappears 🤔
Ok I've just solved my problem by overriding the left/top definitions of my Draggable to auto:
left: auto !important; top: auto !important;
left: auto !important; top: auto !important;
If your Droppable column is vertical and there exists scroll, this doesnt work when you scroll down. Cant find how to fix it.
@barisgunduz
left: auto !important; top: auto !important;
If your Droppable column is vertical and there exists scroll, this doesnt work when you scroll down. Cant find how to fix it.
If your Droppable column is vertical and there exists scroll, You can try the following code
<Draggable
key={rowInfo.original.id}
draggableId={rowInfo.original.id}
index={rowInfo.index}
>
{(provided, snapshot): React.ReactElement<HTMLElement> => {
if (
provided.draggableProps.style &&
"top" in provided.draggableProps.style &&
"left" in provided.draggableProps.style
) {
provided.draggableProps.style.left -= 50;
provided.draggableProps.style.top -= 50;
}
return (
<div
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
>
<ReactTableDefaults.TrComponent
onClick={handleRowClick}
className={clsx(
"w-full",
snapshot.isDragging ? classes.dragTableRow : ""
)}
>
{children}
</ReactTableDefaults.TrComponent>
</div>
);
}}
</Draggable>
Okay I have found the reason but it is strange one. I have a container div around DragDropContext with style backdrop-filtter. And if I remove this style backdrop-filtter from container div. Bug disappears.
It is totally weird, I have this problem, and when I remove the backdrop for its parent problem solved!
Ok I've just solved my problem by overriding the left/top definitions of my Draggable to auto:
left: auto !important; top: auto !important;
oh my god thank you so much. this totally worked.
Okay I have found the reason but it is strange one. I have a container div around DragDropContext with style backdrop-filtter. And if I remove this style backdrop-filtter from container div. Bug disappears.
Yeah, I'm totally shocked by this bug. Remove the style of backdrop-filter
make it work.
Okay thank you guys i had a background blur
applied to a parent and i never would have found this out. This is so random haha
I'm testing react-beautiful-dnd in my electron app. You can see draggable item is moved to the right for approx 50px. And when it is dropped it is also teleported 50px to the left.
https://user-images.githubusercontent.com/18900210/104115286-f134ad00-5337-11eb-95cd-9725513c0c27.mov