Incorrect dragging preview item position when using shadcn popover

[KamilTheDev]

If the draggable list is inside of a shadcn popover, the item is not visible while being dragged. Is there any way to fix this?

[KamilTheDev]

It looks like the issue is the drag preview item is using a wrong positioning system.

If I drag the item, and put my mouse at the very top left corner of the website, then the drag preview item is shown where it should've been when our mouse was inside the draggable list. I'm not sure how to fix this.

[KamilTheDev]

Fixed thanks to atlassian/react-beautiful-dnd#2056 :

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

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

However, it apparently won't work for vertical list with scrolling:

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.

I hope a proper fix can be implemented without needing to do this extra fix to get it working.

[demircancelebi]

For the next person/agent:

{options.map(
  (option: FieldOption, optionIndex: number) => (
    <Draggable
      key={optionIndex}
      draggableId={`option-${optionIndex}`}
      index={optionIndex}
    >
      {(provided) => (
        <div
          ref={provided.innerRef}
          {...provided.draggableProps}
          className="flex gap-2"
          style={{
            ...provided.draggableProps.style,
            left: "auto !important",
            top: "auto !important",
          }}
        >
...

[knightcode]

I'm guessing this is an issue whenever the Draggable is inside any parent that has position: relative or equivalent, which is my case.

[daformat]

Maybe this will help

For me it solved the problem of the preview being in the wrong position (not using shadcn)