Animation breaks moving transforms when programmatically: moving up / adding / removing

[Russo-creation]

Hi,
I'm trying to mange sortable list based on @clauderic starter template codesanbox

What I'm trying to add functionalities with animation for:

• Remove button
• Add button
• Move up / down button

I prepared codesanbox for it: https://codesandbox.io/s/bitter-snowflake-7glql4?file=/src/App.tsx

The animation works fine as long as I'm not clicking twice prepared buttons then animation starts form it's initial position of the list.

I found this thread #980 where @mattrunyon solved same issue I'm facing I needed to manually schedule a remeasure whenever the items changed.

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

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

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

But when I'm adding it to my example nothing happen or maybe I'm implementing it wrongly or was there any changes in the library that it's depreciated? Does anyone know what could possibly happen?

[Russo-creation]

Ok, I figured it out what I did wrong in my case.

I had to add it to the component and add it to the DndContext

function Remeasure({ items }) {
  const context = useDndContext();
  const contextRef = useRef(context);
  
  useEffect(() => {
    contextRef.current = context;
  }, [context]);
  
  useEffect(() => {
    contextRef.current?.measureDroppableContainers([
      ...contextRef.current.droppableContainers.keys(),
    ]);
  }, [items]);

<DndContext
       // {...} all props
      measuring={{ droppable: { strategy: MeasuringStrategy.Always } }}
    >
      <Remeasureitems={items} /> // here

      <SortableContext items={items}>
        <ul className="SortableList" role="application">
          {items.map((item) => (
            <React.Fragment key={item.id}>{renderItem(item)}</React.Fragment>
          ))}
        </ul>
      </SortableContext>
      <SortableOverlay>
        {activeItem ? renderItem(activeItem) : null}
      </SortableOverlay>
    </DndContext>

What I was tiring before was using context outside of the component...

[Russo-creation]

I just noticed still some issue even after adding my above answer to the existing codesanbox https://codesandbox.io/s/bitter-snowflake-7glql4?file=/src/App.tsx

• Major: When clicking "up" button the same row index there animation is not triggering at all - it's just reordering
• Minor: Sometimes clicked "up" button item is moving under the another not above (z-index / order issue?)

screen-capture.1.webm

Can anyone help with this?