useDraggable and a list with overflowY: "auto"

[LeonardoFreitag]

In this code:

import { useState } from "react";
import "./App.css";
import { DndContext } from "@dnd-kit/core";
import Card from "./Card";

function App() {
  const [leftList, setLeftList] = useState([
    { id: "1", nome: "Item 1" },
    { id: "2", nome: "Item 2" },
    { id: "3", nome: "Item 3" },
    { id: "4", nome: "Item 4" },
    { id: "5", nome: "Item 5" },
  ]);
  const [rightList, setRightList] = useState([
    { id: "10", nome: "Item 10" },
    { id: "20", nome: "Item 20" },
    { id: "30", nome: "Item 30" },
    { id: "40", nome: "Item 40" },
    { id: "50", nome: "Item 50" },
  ]);

  return (
    <DndContext>
      <div
        style={{
          position: "absolute",
          inset: "200px",
          backgroundColor: "blue",
          padding: "56px",
          display: "flex",
          flexDirection: "row",
          justifyContent: "space-between",
          // overflow: "hidden",
        }}
      >
        <div
          style={{
            position: "relative",
            display: "flex",
            width: "45%",
            flexDirection: "column",
            backgroundColor: "white",
            overflowY: "auto",
            padding: "12px",
          }}
        >
          {leftList.map((item) => (
            <Card id={item.id} name={item.nome} key={item.id} />
          ))}
        </div>

        <div
          style={{
            display: "flex",
            width: "45%",
            flexDirection: "column",
            backgroundColor: "white",
            padding: "12px",
            overflowY: "initial",
          }}
        >
          {rightList.map((item) => (
            <Card id={item.id} name={item.nome} key={item.id} />
          ))}
        </div>
      </div>
    </DndContext>
  );
}

export default App;

import "./App.css";
import { useDraggable } from "@dnd-kit/core";
import { CSS } from "@dnd-kit/utilities";

interface CardProps {
  id: string;
  name: string;
}

function Card({ id, name }: CardProps) {
  const { attributes, listeners, setNodeRef, transform } = useDraggable({
    id: id,
  });

  const style = {
    transform: CSS.Translate.toString(transform),
    padding: "8px",
    marginBottom: "8px",
    backgroundColor: "yellowgreen",
    borderRadius: "8px",
  };

  return (
    <div style={style} ref={setNodeRef} {...listeners} {...attributes}>
      <p>{name}</p>
    </div>
  );
}

export default Card;

You can see some undesirable behavior during dragging, the object gets locked in the div where the overflowY: "auto" code is. How can I fix this. Sorry for my bad english.

[edwinpgm]

Hi @LeonardoFreitag, did you find some solution for this issue?

[ClaudioPuggioni]

Same issue

[jereze]

Hi all, I have the same request. EDIT: Apparently we should use a drag overlay to render the draggable item outside of the container with overflow: auto|scroll

[ZhichaoOuyang]

same issue