fix(@react-stately/date): update parentKey when a tree node is moved to another parent (#1988)

closes #1987

Co-authored-by: Alireza Mirian <[email protected]>
Co-authored-by: Danni <[email protected]>

Author: 3 people

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

@@ -316,13 +316,19 @@ export function useTreeData<T extends object>(options: TreeOptions<T>): TreeData
         }
 
         items = updateTree(items, key, () => null);
+
+        const movedNode = {
+          ...node,
+          parentKey: toParentKey
+        };
+
         return updateTree(items, toParentKey, parentNode => ({
           key: parentNode.key,
           parentKey: parentNode.parentKey,
           value: parentNode.value,
           children: [
             ...parentNode.children.slice(0, index),
-            node,
+            movedNode,
             ...parentNode.children.slice(index)
           ]
         }));

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

@@ -528,11 +528,23 @@ describe('useTreeData', function () {
     expect(result.current.items[0].children[0]).toBe(initialResult.items[0].children[0]);
     expect(result.current.items[0].children[1]).not.toBe(initialResult.items[0].children[1]);
     expect(result.current.items[0].children[1].children).toHaveLength(2);
-    expect(result.current.items[0].children[1].children[0]).toBe(initialResult.items[0].children[1].children[1]);
+    expect(result.current.items[0].children[1].children[0]).toEqual(initialResult.items[0].children[1].children[1]);
     expect(result.current.items[0].children[1].children[1]).toBe(initialResult.items[0].children[1].children[0]);
     expect(result.current.items[0].children[2]).toBe(initialResult.items[0].children[2]);
   });
 
+  it('update parentKey when a node is moved to another parent', function () {
+    const {result} = renderHook(() => useTreeData({initialItems: initial, getChildren, getKey}));
+
+    act(() => {
+      result.current.move('Brad', 'John', 0);
+    });
+
+    const john = result.current.items[0].children[0];
+    const brad = john.children[0];
+    expect(brad.parentKey).toBe(john.key);
+  });
+
   it('should move an item to a different parent', function () {
     let {result} = renderHook(() => useTreeData({initialItems: initial, getChildren, getKey}));
     let initialResult = result.current;
@@ -547,7 +559,7 @@ describe('useTreeData', function () {
     expect(result.current.items[0].children).toHaveLength(3);
     expect(result.current.items[0].children[0]).not.toBe(initialResult.items[0].children[0]);
     expect(result.current.items[0].children[0].children).toHaveLength(2);
-    expect(result.current.items[0].children[0].children[0]).toBe(initialResult.items[0].children[1].children[1]);
+    expect(result.current.items[0].children[0].children[0].value).toBe(initialResult.items[0].children[1].children[1].value);
     expect(result.current.items[0].children[0].children[1]).toBe(initialResult.items[0].children[0].children[0]);
     expect(result.current.items[0].children[1]).not.toBe(initialResult.items[0].children[1]);
     expect(result.current.items[0].children[1].children).toHaveLength(1);