Wrong draggable position when using example code

[rendomnet]

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.

Screen.Recording.2021-01-10.at.11.34.53.mov

const getItemStyle = (isDragging, draggableStyle) => ({
  // some basic styles to make the items look a bit nicer
  userSelect: 'none',
  padding: grid * 2,
  width: '200px',
  height: '200px',
  margin: `0 ${grid}px 0 0`,

  // change background colour if dragging
  background: isDragging ? 'lightgreen' : 'grey',

  // styles we need to apply on draggables
  ...draggableStyle,
});

const getListStyle = (isDraggingOver) => ({
  background: isDraggingOver ? 'lightblue' : 'lightgrey',
  display: 'flex',
  padding: grid,
  overflow: 'auto',
});
...


      <DragDropContext onDragEnd={onDragEnd}>
        <Droppable droppableId="droppable" direction="horizontal">
          {(provided, snapshot) => (
            <div
              ref={provided.innerRef}
              style={getListStyle(snapshot.isDraggingOver)}
              {...provided.droppableProps}
            >
              {list.map((item, index) => (
                <Draggable key={item.id} draggableId={item.id} index={index}>
                  {(provided, snapshot) => (
                    <div
                      ref={provided.innerRef}
                      {...provided.draggableProps}
                      {...provided.dragHandleProps}
                      style={getItemStyle(
                        snapshot.isDragging,
                        provided.draggableProps.style
                      )}
                    >
                    </div>
                  )}
                </Draggable>
              ))}
              {provided.placeholder}
            </div>
          )}
        </Droppable>
      </DragDropContext>

[rendomnet]

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.

[victorhsr]

Any update about this issue? I'm facing the same problem, when i remove the backdrop-filter from my container div, the bug disappears 🤔

[victorhsr]

Ok I've just solved my problem by overriding the left/top definitions of my Draggable to auto:

left: auto !important; top: auto !important;

[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.

[bluewolfali]

@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>

[Alireza-Mohammadhossein]

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!

[zreecespieces]

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.

[jsonchou]

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.

[Justin99b]

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