feat(RAC): Tree drag and drop #7692

rob-clayburn · 2025-01-30T22:59:06Z

I'm looking to get some feedback on this PR to add drag and drop to the Tree.

I am really really new to this codebase, and there are probably a ton of things I've not understood and have messed up

I've mainly just copied the logic from the listbox and applied it to the tree component.

There's a storybook story which I've added at http://localhost:9003/?path=/story/treeview--tree-example-dynamic-drag-n-drop&providerSwitcher-express=false&strict=true

Some things that would be great to get some feedback/help on are:

I'm unclear as to whether the dragAndDropHooks should be created by the user each time (e.g. in the story). Some things i can see being useful, but it feels like the reorder function shouldn't have to be implemented here. Is there a better place to put this?
Re-ordering works, but at some point it stops working. I can't seem to find a repeatable pattern of drag / drops to consistently replicate this though.
In storybook the hot reload gives an error:
Although I've added the keyboard code - I've not yet tested that - was hoping to get the other issues ironed out first.
The way I've implemented the drop insert indicator causes the tree items to move which in turn can cause the drop to switch from before to after. The droppable listbox story renders items with a gap in between but I'm not sure if that is what is wanted in a tree view.

… if a parent node can be dropped into its children

reidbarber · 2025-02-07T23:39:16Z

Thanks for the PR! I'm going to be taking a closer look when I have some time soon, just wanted to leave an update.

rob-clayburn · 2025-02-19T08:56:12Z

thanks, have you managed to carve out some time to look at this?

reidbarber · 2025-03-11T16:19:03Z

Sorry for the delay, we've been busy with the latest release! I just pushed a few small updates and a story that has DnD working in RAC Tree. I still need to debug RSP TreeView and fix some merge conflicts. The state management in the story should get simplified once we merge #7854.

reidbarber · 2025-03-12T22:34:25Z

Pushed a few changes so it should be in a decent state to test out. Some things to note:

We're going to scope this to Tree in React Aria Components for now (adding to React Spectrum TreeView can be a follow-up). I made a new story for this and removed the old one.
We'll probably need a way expand/collapse items while keyboard navigating during a drop.

snowystinger · 2025-03-14T05:25:09Z

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

@@ -234,10 +235,29 @@ export function useTreeData<T extends object>(options: TreeOptions<T>): TreeData
    }
  }

+  function getDescendantKeys(node?: TreeNode<T>): Key[] {


any reason to have node be optional? can we make it required?

snowystinger · 2025-03-14T05:28:31Z

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

+    if (!node) {
+      return descendantKeys;
+    }
+    function recurse(currentNode: TreeNode<T>) {


does the traversal order matter? preorder, in order, postorder

should descendantKeys be a Set if it doesn't matter?

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

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

snowystinger · 2025-03-14T05:42:37Z

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

+        disabledKeys: state.selectionManager.disabledKeys,
+        disabledBehavior: state.selectionManager.disabledBehavior,
+        layout: 'stack',
+        direction,


I noticed that Table in RAC doesn't specify direction is that a bug? or what does this affect?

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

…r' into tree-dnd

LFDanLu

Approving for further testing. Issues can be investigated separately in a followup PR (I'll need to dive into the useTreeData for one of the aforementioned cases, unsure if it is a drop hooks issue or if the tree data is getting malformed)

LFDanLu · 2025-04-18T21:47:04Z

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

I'll have to track down what exactly is happening but I noticed the following bug:

Using http://localhost:9003/?path=/story/react-aria-components--tree-with-drag-and-drop&args=selectionMode:multiple&providerSwitcher-express=false&strict=true, expand both top level folders and and drag "Project 1" above "Projects"

Drag "Project 1" back somewhere under "Projects" again (e.g. between "Project 3" and "Project 4")
Note that "Project 1" disappears at this point

Another odd case that I discovered:

Drag "Reports 1" into "Projects 2"

Drag "Project 2" down below "Project 3"

Drag "Project 2" down into "Reports" (Aka between "Reports" and "Reports 1" so that it becomes a child of "Reports"

Project 2 actually becomes a root level folder after this

It might be that the drop operation thinks the drop position is "After Reports" which technically isn't wrong but it should really be "Before Reports 1" or have a greater degree of granularity (aka "between Reports and Reports 1"). This actually works with keyboard DnD (and has the proper "insert between Reports and Reports 1" drop target) but for some reason is targeting the wrong drop insertion target I think for mouse DnD

LFDanLu · 2025-04-18T22:52:43Z

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

+        onDropActivate: (e) => {
+          // Expand collapsed item when dragging over
+          if (e.target.type === 'item') {
+            let key = e.target.key;
+            let item = state.collection.getItem(key);
+            if (item && item.hasChildNodes && expandedKeys !== 'all' && !expandedKeys.has(key)) {
+              state.toggleKey(key);
+            }
+          }
+        },


I can't seem to get this to trigger, not sure if regression or known?

LFDanLu · 2025-04-18T22:54:40Z

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

+          if (e.key === 'ArrowRight' || e.key === 'ArrowLeft') {
+            // Toggle expansion when drop target is after expandable item
+            let target = dropState?.target;
+            if (target && target.type === 'item') {


We may want to update this behavior in the future and make it possible for the user to keyboard navigate onto the row when drag and dropping and then accept "ArrowRight/ArrowLeft". Feels a bit confusing at the moment

LFDanLu · 2025-04-18T22:55:49Z

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

+  let dragButtonRef = useRef<HTMLButtonElement>(null);
+  useEffect(() => {
+    if (dragState && !dragButtonRef.current && process.env.NODE_ENV !== 'production') {
+      console.warn('Draggable items in a Table must contain a <Button slot="drag"> element so that keyboard and screen reader users can drag them.');


Suggested change

console.warn('Draggable items in a Table must contain a <Button slot="drag"> element so that keyboard and screen reader users can drag them.');

console.warn('Draggable items in a Tree must contain a <Button slot="drag"> element so that keyboard and screen reader users can drag them.');

devongovett

let's get this in for testing

devongovett · 2025-04-21T16:36:27Z

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

@@ -741,6 +743,7 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
            break;
          }
        }
+        localState.props.onKeyDown?.(e as any);


e won't be a keyboard event here. What was this intended for?

devongovett · 2025-04-21T16:37:01Z

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

@@ -36,7 +36,6 @@ export interface DropOptions {
  /**
   * Handler that is called after a valid drag is held over the drop target for a period of time.
   * This typically opens the item so that the user can drop within it.
-   * @private


Did we find a way to make this accessible on keyboard/screen reader? That's why it was private before.

devongovett · 2025-04-21T17:18:53Z

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

+   * An optional keyboard delegate implementation for type to select,
+   * to override the default.
+   */
+  keyboardDelegate?: KeyboardDelegate


Do we need to expose this as a public prop? Doesn't look like we do in other collection components e.g. GridList

marchingband · 2025-04-23T15:18:58Z

At this stage, is this feature available in nightly builds via NPM?
I'd be happy to help test...
Is there a way I can get an alert when it makes it into "latest" ?
thanks so much.

snowystinger · 2025-04-23T15:58:58Z

Yes, it's on main, so it's now in nightly. There are some follow ups from our own testing here fix: refactor useTreeData
It should land in our next release. We don't have an RSS feed yet, but you could use one of the options outlined here https://www.quora.com/Is-there-a-way-to-subscribe-to-sites-that-dont-have-RSS-feed-functionality to watch our Rleases page https://react-spectrum.adobe.com/releases/index.html

rob-clayburn and others added 9 commits January 30, 2025 17:29

[5574] - add moveBefore and moveAfter to useTreeData

903ba60

add docs

8f14593

remove onlys

768e253

remove console logs

aa2d362

[wip] add intial tree drag and drop

d9b4d57

Merge branch 'main' into tree-dnd

5112433

Merge branch 'main' into tree-dnd

e6becc6

useTreeData - add getDescendantKeys method which is used to determine…

22b88d5

… if a parent node can be dropped into its children

revert packlog json change

121712a

snowystinger assigned reidbarber Feb 11, 2025

Merge remote-tracking branch 'upstream/main' into tree-dnd

7c81ea2

rob-clayburn force-pushed the tree-dnd branch from 13b0645 to 7c81ea2 Compare February 19, 2025 08:52

snowystinger and others added 2 commits March 3, 2025 12:32

feat: Add moveBefore and moveAfter to useTreeData

0e3554a

updates + story

02e07de

Merge remote-tracking branch 'origin/main' into tree-dnd

5be35b6

LFDanLu moved this from 📋 Waiting for Sprint to 🏗 In Progress in RSP Component Milestones Mar 11, 2025

reidbarber added 9 commits March 12, 2025 10:24

remove RSP TreeView dnd for now

d7506e9

cleanup

34073ba

fix story

efd5259

lint

5b38175

lint

e0731ed

Merge remote-tracking branch 'origin/main' into tree-dnd

f7272d9

lint

2cbccd9

ts

8ba1b42

fix listMapData destructure

0504991

snowystinger reviewed Mar 16, 2025

View reviewed changes

reidbarber added 2 commits March 19, 2025 17:20

fixes

074a3f6

lint

bb82173

reidbarber moved this from 🏗 In Progress to 👀 In Review in RSP Component Milestones Apr 8, 2025

reidbarber and others added 19 commits April 9, 2025 13:28

Merge remote-tracking branch 'upstream/main' into tree-dnd

cef6372

Merge remote-tracking branch 'upstream/tree-data-move-before-and-afte…

ce5d5a8

…r' into tree-dnd

update story to use useTreeData

117446c

handle dropPosition === 'on' case

20311a9

set shouldSelectOnPressUp on item if dragging enabled

e01241a

update useTreeData move/moveBefore/moveAfter implementations

896d405

fix stories

8066a96

typescript

36516f8

add drag button

92f3b20

fix nested item drop button in story

7dc4026

prevent dropping items onto themselves or their descendants

9237749

Merge remote-tracking branch 'upstream/main' into tree-dnd

163815e

Merge branch 'main' into tree-dnd

33f12e2

Merge branch 'main' into tree-data-move-before-and-after

7ff84d5

add tests and fix broken ones

42c54f7

remove dead code

b01e3fe

fix lost items when moving to root

1d99e8c

Merge remote-tracking branch 'upstream/tree-data-move-before-and-afte…

315cff8

…r' into tree-dnd

fix tests

88a4627

LFDanLu approved these changes Apr 18, 2025

View reviewed changes

devongovett approved these changes Apr 21, 2025

View reviewed changes

reidbarber added this pull request to the merge queue Apr 21, 2025

Merged via the queue into adobe:main with commit e4ec6b4 Apr 21, 2025
30 checks passed

github-project-automation bot moved this from 👀 In Review to ✅ Done in RSP Component Milestones Apr 21, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(RAC): Tree drag and drop #7692

feat(RAC): Tree drag and drop #7692

rob-clayburn commented Jan 30, 2025

reidbarber commented Feb 7, 2025

rob-clayburn commented Feb 19, 2025

reidbarber commented Mar 11, 2025

reidbarber commented Mar 12, 2025

snowystinger Mar 14, 2025

snowystinger Mar 14, 2025

snowystinger Mar 14, 2025

LFDanLu left a comment

LFDanLu Apr 18, 2025

LFDanLu Apr 18, 2025

LFDanLu Apr 18, 2025

LFDanLu Apr 18, 2025

LFDanLu Apr 18, 2025

LFDanLu Apr 18, 2025

devongovett left a comment

devongovett Apr 21, 2025

devongovett Apr 21, 2025

devongovett Apr 21, 2025

marchingband commented Apr 23, 2025

snowystinger commented Apr 23, 2025

	console.warn('Draggable items in a Table must contain a <Button slot="drag"> element so that keyboard and screen reader users can drag them.');
	console.warn('Draggable items in a Tree must contain a <Button slot="drag"> element so that keyboard and screen reader users can drag them.');

feat(RAC): Tree drag and drop #7692

feat(RAC): Tree drag and drop #7692

Conversation

rob-clayburn commented Jan 30, 2025

reidbarber commented Feb 7, 2025

rob-clayburn commented Feb 19, 2025

reidbarber commented Mar 11, 2025

reidbarber commented Mar 12, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

LFDanLu left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

devongovett left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

marchingband commented Apr 23, 2025

snowystinger commented Apr 23, 2025