Fix useListData so that reorder operations are correctly inserted at the correct index (#3724)

* Fix useListData move operation logic

specifically fix it for cases where the user is reordering a set of sequential items and is moving it to a drop position one below the last item being moved

* Update packages/@react-stately/data/src/useListData.ts

Co-authored-by: Devon Govett <[email protected]>

Co-authored-by: Devon Govett <[email protected]>

Author: LFDanLu

packages/@react-spectrum/list/test/ListViewDnd.test.js

@@ -421,17 +421,17 @@ describe('ListView', function () {
         fireEvent(cell, new DragEvent('dragstart', {dataTransfer, clientX: 0, clientY: 0}));
         expect(onDragStart).toHaveBeenCalledTimes(1);
 
-        fireEvent.pointerMove(cell, {pointerType: 'mouse', button: 0, pointerId: 1, clientX: 1, clientY: 110});
-        fireEvent(cell, new DragEvent('drag', {dataTransfer, clientX: 1, clientY: 110}));
-        fireEvent(grid, new DragEvent('dragover', {dataTransfer, clientX: 1, clientY: 110}));
-        fireEvent.pointerUp(cell, {pointerType: 'mouse', button: 0, pointerId: 1, clientX: 1, clientY: 110});
+        fireEvent.pointerMove(cell, {pointerType: 'mouse', button: 0, pointerId: 1, clientX: 1, clientY: 150});
+        fireEvent(cell, new DragEvent('drag', {dataTransfer, clientX: 1, clientY: 150}));
+        fireEvent(grid, new DragEvent('dragover', {dataTransfer, clientX: 1, clientY: 150}));
+        fireEvent.pointerUp(cell, {pointerType: 'mouse', button: 0, pointerId: 1, clientX: 1, clientY: 150});
 
-        fireEvent(grid, new DragEvent('drop', {dataTransfer, clientX: 1, clientY: 110}));
+        fireEvent(grid, new DragEvent('drop', {dataTransfer, clientX: 1, clientY: 150}));
         act(() => jest.runAllTimers());
         await act(async () => Promise.resolve());
         expect(onDrop).toHaveBeenCalledTimes(1);
 
-        fireEvent(cell, new DragEvent('dragend', {dataTransfer, clientX: 1, clientY: 110}));
+        fireEvent(cell, new DragEvent('dragend', {dataTransfer, clientX: 1, clientY: 150}));
         expect(onDragEnd).toHaveBeenCalledTimes(1);
 
         act(() => jest.runAllTimers());

packages/@react-stately/data/src/useListData.ts

@@ -326,11 +326,7 @@ function insert<T>(state: ListState<T>, index: number, ...values: T[]): ListStat
 
 function move<T>(state: ListState<T>, indices: number[], toIndex: number): ListState<T> {
   // Shift the target down by the number of items being moved from before the target
-  for (let index of indices) {
-    if (index < toIndex) {
-      toIndex--;
-    }
-  }
+  toIndex -= indices.filter(index => index < toIndex).length;
 
   let moves = indices.map(from => ({
     from,

packages/@react-stately/data/test/useListData.test.js

@@ -601,6 +601,26 @@ describe('useListData', function () {
         many[5]
       ]);
     });
+
+    it('should move multiple items before another item to after that item', function () {
+      let {result} = renderHook(() => useListData({initialItems: many, getKey}));
+      let initialResult = result.current;
+
+      act(() => {
+        result.current.moveAfter('Five', ['Two', 'Three', 'Four']);
+      });
+
+      expect(result.current.items).not.toBe(initialResult.items);
+      expect(result.current.items).toHaveLength(6);
+      expect(result.current.items).toEqual([
+        many[0],
+        many[4],
+        many[1],
+        many[2],
+        many[3],
+        many[5]
+      ]);
+    });
   });
 
   it('should support filtering', function () {