Programatically moving items giving wrong transforms

[mattrunyon]

I have a sortable tree I based off the tree example, but the user can also use buttons to move items up or down in the list. When doing this, it seems that the transform property given is incorrect until I perform a drag/drop which resets where the starting position is calculated from.

Is there a way to fix the transform or is this a bug? I inspected the animations and confirmed that the item is getting multiples of the height with each click of the "Move down" button.

Screen.Recording.2022-12-22.at.1.22.48.AM.mov

[mattrunyon]

I figured something out. I needed to manually schedule a remeasure whenever the items changed. I'm controlling the items externally, so the items prop changes whenever the buttons are clicked.

const context = useDndContext();
const contextRef = useRef(context);

useEffect(() => {
  contextRef.current = context;
}, [context]);

useEffect(() => {
  contextRef.current?.measureDroppableContainers([
    ...contextRef.current.droppableContainers.keys(),
  ]);
}, [items]);

[phunanon]

I'm having the exact same problem you were, but unfortunately this didn't resolve it for me.

[phunanon]

Turns out somebody else figured out how to apply your solution:
#1157 (comment)
by putting it in its own component. Worked for me!