Draggable item is not appearing next to the cursor

[alexpuertasr]

I'm implemented an interactive list inside of a modal that appears from the right. For the animation of the modal I'm using react-spring, this one leave a transform: translateX(0px) when the animation is finish. For some reason with this css property react-beautiful-dnd is not able show the draggable item in the correct position

Expected behavior

The dragging item is appearing next to the cursor

Actual behavior

The dragging item is not appearing next to the cursor

Steps to reproduce

Add this styles in the parent where the react-beautiful-dnd is implemented:

position: absolute;
right: 0;
transform: translateX(0px);

What version of React are you using?

16.13.1

What version of react-beautiful-dnd are you running?

5.2.0

What browser are you using?

Chrome

Demo

Code: https://codesandbox.io/s/checklist-dnd-issue-ku2zf?file=/src/Checklist.jsx https://ku2zf.csb.app/

[matheusAle]

I just do:

and becomes work.

[durgeshm01722]

I fixed it this way:

<Draggable key={id} draggableId={id} index={index}>
    {(provided) => (
        <li ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}
            style={{ ...provided.draggableProps.style,
                      left: "auto !important",
                      top: "auto !important",
              }}>
                  ...      
        </li>
    )}
</Draggable>

Hope it helps :-)

[tywhisky]

I fixed it this way:

<Draggable key={id} draggableId={id} index={index}>
    {(provided) => (
        <li ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}
            style={{ ...provided.draggableProps.style,
                      left: "auto !important",
                      top: "auto !important",
              }}>
                  ...      
        </li>
    )}
</Draggable>

Hope it helps :-)

It's the simplest way to solve this problem. But another issue: the dragged item will be coverd by the next item. (The prev's z-index is normal). I don't know why and how to solve it (it's useless when I force set z-index)