fix: correctly update focus to the first inserted item after a drop in Tree

Author: chirokas

packages/@react-aria/dnd/src/useDroppableCollection.ts

@@ -273,6 +273,15 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
               first = item.parentKey;
             }
 
+            if (item?.type === 'content') {
+              for (const node of state.collection) {
+                if (node.type === 'item' && newKeys.has(node.key)) {
+                  first = node.key;
+                  break;
+                }
+              }
+            }
+
             // eslint-disable-next-line max-depth
             if (first != null) {
               state.selectionManager.setFocusedKey(first);

packages/react-aria-components/test/Tree.test.tsx

@@ -24,7 +24,8 @@ import {useTreeData} from 'react-stately';
 
 let {
   EmptyTreeStaticStory: EmptyLoadingTree,
-  LoadingStoryDepOnTopStory: LoadingMoreTree
+  LoadingStoryDepOnTopStory: LoadingMoreTree,
+  TreeWithDragAndDrop
 } = composeStories(stories);
 
 let onSelectionChange = jest.fn();
@@ -1886,6 +1887,43 @@ describe('Tree', () => {
       expect(onRootDrop).toHaveBeenCalledTimes(1);
     });
 
+    it('should focus the first inserted item after a drop', async () => {
+      const {getAllByRole} = render(<TreeWithDragAndDrop />);
+
+      const trees = getAllByRole('treegrid');
+      let rows = within(trees[0]).getAllByRole('row');
+      const dataTransfer = new DataTransfer();
+
+      fireEvent(rows[0], new DragEvent('dragstart', {dataTransfer, clientX: 5, clientY: 5}));
+      act(() => jest.runAllTimers());
+
+      fireEvent(trees[1], new DragEvent('dragenter', {dataTransfer, clientX: 50, clientY: 50}));
+      fireEvent(trees[1], new DragEvent('dragover', {dataTransfer, clientX: 50, clientY: 50}));
+      expect(trees[1]).toHaveAttribute('data-drop-target', 'true');
+
+      await act(() => fireEvent(trees[1], new DragEvent('drop', {dataTransfer, clientX: 50, clientY: 50})));
+      act(() => jest.runAllTimers());
+      await user.click(document.body);
+      act(() => jest.runAllTimers());
+
+      await user.tab();
+      await user.keyboard('{ArrowRight}');
+      await user.keyboard('{ArrowRight}');
+      await user.keyboard('{Enter}');
+      act(() => jest.runAllTimers());
+      await user.tab();
+      act(() => jest.runAllTimers());
+
+      rows = within(trees[1]).getAllByRole('row');
+      expect(rows).toHaveLength(4);
+      expect(within(rows[3]).getAllByRole('button')[0]).toHaveAttribute('aria-label', 'Insert after Projects');
+      expect(document.activeElement).toBe(within(rows[3]).getAllByRole('button')[0]);
+      expect(rows[3]).toHaveAttribute('data-drop-target', 'true');
+
+      await user.keyboard('{Enter}');
+      act(() => jest.runAllTimers());
+    });
+
     it('should support disabled drag and drop', async () => {
       let {getByRole, queryAllByRole} = render(
         <DraggableTree isDisabled />