clauderic / dnd-kit

The modern, lightweight, performant, accessible and extensible drag & drop toolkit for React.
http://dndkit.com
MIT License
13.13k stars 651 forks source link

Disabling `scrollIntoView` as a optional prop in `DragOverlay` #975

Open martaradziszewska opened 1 year ago

martaradziszewska commented 1 year ago

First of all, thank you for creating such a great tool! So many options and possibilities to customize! ❤️

I'd like to propose an improvement to DragOverlay component which would make it much easier to customize the useDropAnimation function.

Recently, I've been trying to customize dropAnimation to disable scrolling into view after dropping the active element. Turns out, I'd have to override the whole useDropAnimation function to disable just that. I'd like to keep drop animation but without scrolling.

A control over scrolling to view would solve the problem when two or more users are working on a multi-container board. Dropping the active item causes abrupt scrolling after updating one user's board. This looks fine for the user who dropped the item, but for another user, it may break their current workflow.

It could be another option in dropAnimation property. @clauderic please let me know what you think of that. Maybe you have another simpler way to customize just the scrolling behavior?

martaradziszewska commented 1 year ago

One of the solutions I found is to prevent scrollIntoView on the sortable node.

   <div
      {...listeners}
      {...attributes}
      ref={node => {
        setNodeRef(node)
        if (node) {
          node.scrollIntoView = () => {}
        }
      }}
    />
felipetodev commented 1 year ago

try <DndContext autoScroll={false} />