fix: Tree Dnd updates #8229

devongovett · 2025-05-13T19:21:46Z

Support onMove event, which allows moving between parents. onReorder now only allows reordering within the same parent.
Fix accessibility of drop indicators (they should have role=row/gridcell instead of role=option)
Fix dropping between the parent item and its first child
Made ArrowLeft/ArrowRight to expand while dragging work while focused on the item rather than the drop indicator after it. Also fixed RTL
Made the chevron visible to screen readers so mobile users can expand/collapse an item while dragging. For now, this is not tabbable (since keyboard users can use arrow keys to expand/collapse). This will be needed for other components, but needs further work on propagating the focus event so the focus ring becomes visible.

rspbot · 2025-05-13T19:28:21Z

Build successful! 🎉

LFDanLu · 2025-05-13T23:08:30Z

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

+              if (nextKey != null) {
+                target = {
+                  type: 'item',
+                  key: nextKey,
+                  dropPosition: 'before'
+                };
+              }
+            }


could we do something like:

let beforeTarget = { type: 'item', key: nextKey, dropPosition: 'before' }; if (nextKey != null && isValidDropTarget(beforeTarget) && isValidDropTarget(target)) { return beforeTarget; }

This would allow us to drop after the last item in your current parent scope even if the next item after that is a item outside your parent scope. Maybe doesn't even need the isValidDropTarget(target) check.

This doesn't fix the onMove case where you can't target the after position for the same case above, but maybe the x,y can be utilized here to favor one drop position over the other (aka if you are closer to dropping outside the left edge of the parent). The tolerance is a bit tight though

Similarly, I wonder if we could use the x coordinate to determine if a root drop should happen instead of placing it after the last item of the tree. As is is now, a user can't move something immediately after "Reports" without collapsing it, something they can't afford to do via mouse/touch if they are trying to move a child of "Report" up and out to the root level.

rspbot · 2025-05-13T23:12:19Z

Build successful! 🎉

LFDanLu · 2025-05-13T23:23:46Z

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

+      if (this.getCurrentActivateButton()?.contains(e.target as Node)) {
+        this.activate();
+        return;
+      }


In Android talkback, when I double tap when focused on the expand chevron while a drag session is active, the drop executes instead of expanding the target row. Not sure why, will need to dig when I can actually connect to a my locally hosted storybook rather than the built one

Interesting, for VO on iPhone it was the opposite.

yeah, it turns out that its due to talkback not moving DOM focus as your move the cursor. Does it still work in iPhone after the changes?

rspbot · 2025-05-13T23:25:05Z

Build successful! 🎉

rspbot · 2025-05-14T01:14:31Z

Build successful! 🎉

rspbot · 2025-05-14T17:25:48Z

Build successful! 🎉

rspbot · 2025-05-14T17:27:22Z

Build successful! 🎉

rspbot · 2025-05-14T17:54:37Z

Build successful! 🎉

rspbot · 2025-05-14T17:54:38Z

## API Changes

react-aria-components

/react-aria-components:DropIndicator

 DropIndicator {
+  activateButtonRef?: RefObject<FocusableElement | null>
   children?: ReactNode | ((DropIndicatorRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((DropIndicatorRenderProps & {
 })) => string
   style?: CSSProperties | ((DropIndicatorRenderProps & {
     defaultStyle: CSSProperties
 })) => CSSProperties | undefined
   target: DropTarget
 }

/react-aria-components:TreeItemRenderProps

 TreeItemRenderProps {
+  allowsDragging?: boolean
   hasChildItems: boolean
   id: Key
   isDisabled: boolean
+  isDragging?: boolean
+  isDropTarget?: boolean
   isExpanded: boolean
   isFocusVisible: boolean
   isFocusVisibleWithin: boolean
   isFocused: boolean
   isPressed: boolean
   isSelected: boolean
   level: number
   selectionBehavior: SelectionBehavior
   selectionMode: SelectionMode
   state: TreeState<unknown>
 }

/react-aria-components:TreeItemContentRenderProps

 TreeItemContentRenderProps {
+  allowsDragging?: boolean
   hasChildItems: boolean
   id: Key
   isDisabled: boolean
+  isDragging?: boolean
+  isDropTarget?: boolean
   isExpanded: boolean
   isFocusVisible: boolean
   isFocusVisibleWithin: boolean
   isFocused: boolean
   isPressed: boolean
   isSelected: boolean
   level: number
   selectionBehavior: SelectionBehavior
   selectionMode: SelectionMode
   state: TreeState<unknown>
 }

/react-aria-components:DragAndDropOptions

 DragAndDropOptions {
   acceptedDragTypes?: 'all' | Array<string | symbol> = 'all'
   dropTargetDelegate?: DropTargetDelegate
   getAllowedDropOperations?: () => Array<DropOperation>
   getDropOperation?: (DropTarget, DragTypes, Array<DropOperation>) => DropOperation
   getItems?: (Set<Key>) => Array<DragItem> = () => []
   isDisabled?: boolean
   onDragEnd?: (DraggableCollectionEndEvent) => void
   onDragMove?: (DraggableCollectionMoveEvent) => void
   onDragStart?: (DraggableCollectionStartEvent) => void
   onDrop?: (DroppableCollectionDropEvent) => void
+  onDropActivate?: (DroppableCollectionActivateEvent) => void
   onDropEnter?: (DroppableCollectionEnterEvent) => void
   onDropExit?: (DroppableCollectionExitEvent) => void
   onInsert?: (DroppableCollectionInsertDropEvent) => void
   onItemDrop?: (DroppableCollectionOnItemDropEvent) => void
+  onMove?: (DroppableCollectionReorderEvent) => void
   onReorder?: (DroppableCollectionReorderEvent) => void
   onRootDrop?: (DroppableCollectionRootDropEvent) => void
   renderDragPreview?: (Array<DragItem>) => JSX.Element
   renderDropIndicator?: (DropTarget) => JSX.Element
 }

/react-aria-components:DropIndicatorProps

 DropIndicatorProps {
+  activateButtonRef?: RefObject<FocusableElement | null>
   children?: ReactNode | ((DropIndicatorRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((DropIndicatorRenderProps & {
 })) => string
   style?: CSSProperties | ((DropIndicatorRenderProps & {
     defaultStyle: CSSProperties
 })) => CSSProperties | undefined
   target: DropTarget
 }

@react-aria/dnd

/@react-aria/dnd:DroppableCollectionOptions

 DroppableCollectionOptions {
   acceptedDragTypes?: 'all' | Array<string | symbol> = 'all'
   dropTargetDelegate: DropTargetDelegate
   getDropOperation?: (DropTarget, DragTypes, Array<DropOperation>) => DropOperation
   keyboardDelegate: KeyboardDelegate
   onDrop?: (DroppableCollectionDropEvent) => void
+  onDropActivate?: (DroppableCollectionActivateEvent) => void
   onDropEnter?: (DroppableCollectionEnterEvent) => void
   onDropExit?: (DroppableCollectionExitEvent) => void
   onInsert?: (DroppableCollectionInsertDropEvent) => void
   onItemDrop?: (DroppableCollectionOnItemDropEvent) => void
-  onKeyDown?: KeyboardEvents['onKeyDown']
+  onKeyDown?: (KeyboardEvent) => void
+  onMove?: (DroppableCollectionReorderEvent) => void
   onReorder?: (DroppableCollectionReorderEvent) => void
   onRootDrop?: (DroppableCollectionRootDropEvent) => void
   shouldAcceptItemDrop?: (ItemDropTarget, DragTypes) => boolean
 }

/@react-aria/dnd:DroppableItemOptions

 DroppableItemOptions {
+  activateButtonRef?: RefObject<FocusableElement | null>
   target: DropTarget
 }

/@react-aria/dnd:DropIndicatorProps

 DropIndicatorProps {
+  activateButtonRef?: RefObject<FocusableElement | null>
   target: DropTarget
 }

@react-spectrum/dnd

/@react-spectrum/dnd:DragAndDropOptions

 DragAndDropOptions {
   acceptedDragTypes?: 'all' | Array<string | symbol> = 'all'
   getAllowedDropOperations?: () => Array<DropOperation>
   getDropOperation?: (DropTarget, DragTypes, Array<DropOperation>) => DropOperation
   getItems?: (Set<Key>) => Array<DragItem> = () => []
   onDragEnd?: (DraggableCollectionEndEvent) => void
   onDragMove?: (DraggableCollectionMoveEvent) => void
   onDragStart?: (DraggableCollectionStartEvent) => void
   onDrop?: (DroppableCollectionDropEvent) => void
+  onDropActivate?: (DroppableCollectionActivateEvent) => void
   onDropEnter?: (DroppableCollectionEnterEvent) => void
   onDropExit?: (DroppableCollectionExitEvent) => void
   onInsert?: (DroppableCollectionInsertDropEvent) => void
   onItemDrop?: (DroppableCollectionOnItemDropEvent) => void
+  onMove?: (DroppableCollectionReorderEvent) => void
   onReorder?: (DroppableCollectionReorderEvent) => void
   onRootDrop?: (DroppableCollectionRootDropEvent) => void
   renderPreview?: (Set<Key>, Key) => JSX.Element
   shouldAcceptItemDrop?: (ItemDropTarget, DragTypes) => boolean

@react-stately/dnd

/@react-stately/dnd:DroppableCollectionStateOptions

 DroppableCollectionStateOptions {
   acceptedDragTypes?: 'all' | Array<string | symbol> = 'all'
   collection: Collection<Node<unknown>>
   getDropOperation?: (DropTarget, DragTypes, Array<DropOperation>) => DropOperation
   isDisabled?: boolean
   onDrop?: (DroppableCollectionDropEvent) => void
   onDropEnter?: (DroppableCollectionEnterEvent) => void
   onDropExit?: (DroppableCollectionExitEvent) => void
   onInsert?: (DroppableCollectionInsertDropEvent) => void
   onItemDrop?: (DroppableCollectionOnItemDropEvent) => void
+  onMove?: (DroppableCollectionReorderEvent) => void
   onReorder?: (DroppableCollectionReorderEvent) => void
   onRootDrop?: (DroppableCollectionRootDropEvent) => void
   selectionManager: MultipleSelectionManager
   shouldAcceptItemDrop?: (ItemDropTarget, DragTypes) => boolean

This reverts commit 206ebd5.

* Revert "feat(RAC): Tree drag and drop (#7692)" This reverts commit e4ec6b4. * Revert "fix: Tree Dnd updates (#8229)" This reverts commit 206ebd5. * lint * restore useTreeData tests

devongovett and others added 3 commits May 13, 2025 11:10

Add onMove event and fix drop indicator a11y

95c1269

use expand button as activate button

a4246ec

lint

e143660

reidbarber mentioned this pull request May 13, 2025

[WIP] fix: RAC Tree DnD follow-up #8152

Closed

5 tasks

reidbarber added the release label May 13, 2025

fix onClick to check if event is within activateButton

da31e61

LFDanLu reviewed May 13, 2025

View reviewed changes

add contains check to onKeyUp

74ecf21

LFDanLu reviewed May 13, 2025

View reviewed changes

LFDanLu added 2 commits May 13, 2025 18:01

Fix android talkback expand row when dragging

9bfd404

fix lint

e6e5ed7

reidbarber added 2 commits May 14, 2025 12:16

fix item check in onClick to use contains

5078f05

Merge branch 'main' into tree-dnd-fixes

cc4327d

readd missing logic

268b967

LFDanLu approved these changes May 14, 2025

View reviewed changes

reidbarber approved these changes May 15, 2025

View reviewed changes

devongovett added this pull request to the merge queue May 15, 2025

Merged via the queue into main with commit 206ebd5 May 15, 2025
30 checks passed

devongovett deleted the tree-dnd-fixes branch May 15, 2025 17:17

reidbarber added a commit that referenced this pull request May 15, 2025

Revert "fix: Tree Dnd updates (#8229)"

7437004

This reverts commit 206ebd5.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: Tree Dnd updates #8229

fix: Tree Dnd updates #8229

devongovett commented May 13, 2025

rspbot commented May 13, 2025

LFDanLu May 13, 2025

LFDanLu May 13, 2025

rspbot commented May 13, 2025

LFDanLu May 13, 2025

reidbarber May 14, 2025

LFDanLu May 14, 2025

rspbot commented May 13, 2025

rspbot commented May 14, 2025

rspbot commented May 14, 2025

rspbot commented May 14, 2025

rspbot commented May 14, 2025

rspbot commented May 14, 2025

fix: Tree Dnd updates #8229

fix: Tree Dnd updates #8229

Conversation

devongovett commented May 13, 2025

rspbot commented May 13, 2025

LFDanLu May 13, 2025

Choose a reason for hiding this comment

LFDanLu May 13, 2025

Choose a reason for hiding this comment

rspbot commented May 13, 2025

LFDanLu May 13, 2025

Choose a reason for hiding this comment

reidbarber May 14, 2025

Choose a reason for hiding this comment

LFDanLu May 14, 2025

Choose a reason for hiding this comment

rspbot commented May 13, 2025

rspbot commented May 14, 2025

rspbot commented May 14, 2025

rspbot commented May 14, 2025

rspbot commented May 14, 2025

rspbot commented May 14, 2025

react-aria-components

/react-aria-components:DropIndicator

/react-aria-components:TreeItemRenderProps

/react-aria-components:TreeItemContentRenderProps

/react-aria-components:DragAndDropOptions

/react-aria-components:DropIndicatorProps

@react-aria/dnd

/@react-aria/dnd:DroppableCollectionOptions

/@react-aria/dnd:DroppableItemOptions

/@react-aria/dnd:DropIndicatorProps

@react-spectrum/dnd

/@react-spectrum/dnd:DragAndDropOptions

@react-stately/dnd

/@react-stately/dnd:DroppableCollectionStateOptions