fix: Fix keyboard DnD navigation in expandable rows RAC Table by LFDanLu · Pull Request #9773 · adobe/react-spectrum

LFDanLu · 2026-03-10T22:05:33Z

Closes RSP Component Milestones (view)

✅ Pull Request Checklist:

Included link to corresponding React Spectrum GitHub Issue.
Added/updated unit tests and storybook for this change (for new code or code which already has tests).
Filled out test instructions.
Updated documentation (if it already exists for this component).
Looked at the Accessibility Practices for this feature - Aria Practices

📝 Test Instructions:

Go to the RAC Table DnD docs and expand all the rows.
Start a keyboard drag operation on "Budget" and press ArrowDown twice. That should cause the drop indicator to become wider since you are changing the drop position to be the drop position after higher level parent rows.
Press ArrowUp multiple times. You should see the drop indicator become smaller and then move visually after "Weekly Report"

Previously step 3 would skip directly to be after "Weekly Report"

🧢 Your Project:

RSP

this is specifcally handling the case where the user navigates upwards through nested row drop targets

…new collections instead

rspbot · 2026-03-10T22:16:52Z

Build successful! 🎉

snowystinger

Looks like it works well.

Unrelated, but I keep getting the double focus ring with that example in particular. I wonder if it's related to fix useFocusRing perf ( and collection items not necessarily re-rendering. will have to look into that more

LFDanLu · 2026-03-10T22:58:41Z

@snowystinger yeah, it actually seems to be the easiest way to reproduce the double focus rings that I've found now haha

snowystinger · 2026-03-11T00:23:03Z

packages/@react-aria/dnd/test/DropTargetKeyboardNavigation.test.tsx

  getChildren(key: Key): Iterable<Node<Item>> {
    let item = this.map.get(key);
-    return item?.childNodes ?? [];
+    return Array.from(item?.childNodes || [])?.filter(item => item.type !== 'item') ?? [];


We can avoid double traversal, #9013 (comment)

lol it's just a test, this is not important

rspbot · 2026-03-13T22:21:52Z

Build successful! 🎉

rspbot · 2026-03-13T22:23:56Z

Build successful! 🎉

rspbot · 2026-03-13T22:23:57Z

## API Changes

react-aria-components

/react-aria-components:GridList

 GridList <T extends {}> {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean | FocusStrategy
   children?: ReactNode | ({}) => ReactNode
   className?: ClassNameOrFunction<GridListRenderProps> = 'react-aria-GridList'
   defaultSelectedKeys?: 'all' | Iterable<Key>
   dependencies?: ReadonlyArray<any>
   disabledBehavior?: DisabledBehavior = "all"
   disabledKeys?: Iterable<Key>
   disallowEmptySelection?: boolean
   disallowTypeAhead?: boolean = false
   dragAndDropHooks?: DragAndDropHooks<NoInfer<{}>>
   escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
   id?: string
   items?: Iterable<T>
   keyboardNavigationBehavior?: 'arrow' | 'tab' = 'arrow'
   layout?: 'stack' | 'grid' = 'stack'
   onAction?: (Key) => void
   onSelectionChange?: (Selection) => void
-  orientation?: 'horizontal' | 'vertical' = 'vertical'
   render?: DOMRenderFunction<keyof React.JSX.IntrinsicElements, GridListRenderProps>
   renderEmptyState?: (GridListRenderProps) => ReactNode
   selectedKeys?: 'all' | Iterable<Key>
   selectionBehavior?: SelectionBehavior = "toggle"
   shouldSelectOnPressUp?: boolean
   slot?: string | null
   style?: StyleOrFunction<GridListRenderProps>
 }

/react-aria-components:GridListProps

 GridListProps <T> {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean | FocusStrategy
   children?: ReactNode | (T) => ReactNode
   className?: ClassNameOrFunction<GridListRenderProps> = 'react-aria-GridList'
   defaultSelectedKeys?: 'all' | Iterable<Key>
   dependencies?: ReadonlyArray<any>
   disabledBehavior?: DisabledBehavior = "all"
   disabledKeys?: Iterable<Key>
   disallowEmptySelection?: boolean
   disallowTypeAhead?: boolean = false
   dragAndDropHooks?: DragAndDropHooks<NoInfer<T>>
   escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
   id?: string
   items?: Iterable<T>
   keyboardNavigationBehavior?: 'arrow' | 'tab' = 'arrow'
   layout?: 'stack' | 'grid' = 'stack'
   onAction?: (Key) => void
   onSelectionChange?: (Selection) => void
-  orientation?: 'horizontal' | 'vertical' = 'vertical'
   render?: DOMRenderFunction<keyof React.JSX.IntrinsicElements, GridListRenderProps>
   renderEmptyState?: (GridListRenderProps) => ReactNode
   selectedKeys?: 'all' | Iterable<Key>
   selectionBehavior?: SelectionBehavior = "toggle"
   shouldSelectOnPressUp?: boolean
   slot?: string | null
   style?: StyleOrFunction<GridListRenderProps>
 }

/react-aria-components:TreeEmptyStateRenderProps

-TreeEmptyStateRenderProps {
-  allowsDragging: boolean
-  isFocusVisible: boolean
-  isFocused: boolean
-  selectionMode: SelectionMode
-  state: TreeState<unknown>
-}

@react-aria/utils

/@react-aria/utils:getNonce

-getNonce {
-  doc?: Document
-  returnVal: undefined
-}

@react-spectrum/s2

/@react-spectrum/s2:CardView

 CardView <T extends {}> {
   UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean | FocusStrategy
   children?: ReactNode | (T) => ReactNode
   defaultSelectedKeys?: 'all' | Iterable<Key>
   density?: 'compact' | 'regular' | 'spacious' = 'regular'
   dependencies?: ReadonlyArray<any>
   disabledBehavior?: DisabledBehavior = "all"
   disabledKeys?: Iterable<Key>
   disallowEmptySelection?: boolean
   disallowTypeAhead?: boolean = false
   dragAndDropHooks?: DragAndDropHooks<NoInfer<T>>
   escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
   id?: string
   items?: Iterable<T>
   layout?: 'grid' | 'waterfall' = 'grid'
   loadingState?: LoadingState
   onAction?: (Key) => void
   onLoadMore?: () => void
   onSelectionChange?: (Selection) => void
-  orientation?: 'horizontal' | 'vertical' = 'vertical'
   renderActionBar?: ('all' | Set<Key>) => ReactElement
   renderEmptyState?: (GridListRenderProps) => ReactNode
   selectedKeys?: 'all' | Iterable<Key>
   selectionMode?: SelectionMode
   shouldSelectOnPressUp?: boolean
   size?: 'XS' | 'S' | 'M' | 'L' | 'XL' = 'M'
   slot?: string | null
   styles?: StylesPropWithHeight
   variant?: 'primary' | 'secondary' | 'tertiary' | 'quiet' = 'primary'
 }

/@react-spectrum/s2:ListView

 ListView <T extends {}> {
   UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean | FocusStrategy
   children: ReactNode | ({}) => ReactNode
   defaultSelectedKeys?: 'all' | Iterable<Key>
   dependencies?: ReadonlyArray<any>
   disabledBehavior?: DisabledBehavior = "all"
   disabledKeys?: Iterable<Key>
   disallowEmptySelection?: boolean
   disallowTypeAhead?: boolean = false
   escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
   hideLinkOutIcon?: boolean
   id?: string
   isQuiet?: boolean
   items?: Iterable<T>
   loadingState?: LoadingState
   onAction?: (Key) => void
   onLoadMore?: () => void
   onSelectionChange?: (Selection) => void
-  orientation?: 'horizontal' | 'vertical' = 'vertical'
   overflowMode?: 'wrap' | 'truncate' = 'truncate'
   renderActionBar?: ('all' | Set<Key>) => ReactElement
   renderEmptyState?: (GridListRenderProps) => ReactNode
   selectedKeys?: 'all' | Iterable<Key>
   selectionStyle?: 'highlight' | 'checkbox' = 'checkbox'
   shouldSelectOnPressUp?: boolean
   slot?: string | null
   styles?: StylesPropWithHeight
 }

/@react-spectrum/s2:CardViewProps

 CardViewProps <T> {
   UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean | FocusStrategy
   children?: ReactNode | (T) => ReactNode
   defaultSelectedKeys?: 'all' | Iterable<Key>
   density?: 'compact' | 'regular' | 'spacious' = 'regular'
   dependencies?: ReadonlyArray<any>
   disabledBehavior?: DisabledBehavior = "all"
   disabledKeys?: Iterable<Key>
   disallowEmptySelection?: boolean
   disallowTypeAhead?: boolean = false
   dragAndDropHooks?: DragAndDropHooks<NoInfer<T>>
   escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
   id?: string
   items?: Iterable<T>
   layout?: 'grid' | 'waterfall' = 'grid'
   loadingState?: LoadingState
   onAction?: (Key) => void
   onLoadMore?: () => void
   onSelectionChange?: (Selection) => void
-  orientation?: 'horizontal' | 'vertical' = 'vertical'
   renderActionBar?: ('all' | Set<Key>) => ReactElement
   renderEmptyState?: (GridListRenderProps) => ReactNode
   selectedKeys?: 'all' | Iterable<Key>
   selectionMode?: SelectionMode
   shouldSelectOnPressUp?: boolean
   size?: 'XS' | 'S' | 'M' | 'L' | 'XL' = 'M'
   slot?: string | null
   styles?: StylesPropWithHeight
   variant?: 'primary' | 'secondary' | 'tertiary' | 'quiet' = 'primary'
 }

/@react-spectrum/s2:ListViewProps

 ListViewProps <T> {
   UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean | FocusStrategy
   children: ReactNode | (T) => ReactNode
   defaultSelectedKeys?: 'all' | Iterable<Key>
   dependencies?: ReadonlyArray<any>
   disabledBehavior?: DisabledBehavior = "all"
   disabledKeys?: Iterable<Key>
   disallowEmptySelection?: boolean
   disallowTypeAhead?: boolean = false
   escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
   hideLinkOutIcon?: boolean
   id?: string
   isQuiet?: boolean
   items?: Iterable<T>
   loadingState?: LoadingState
   onAction?: (Key) => void
   onLoadMore?: () => void
   onSelectionChange?: (Selection) => void
-  orientation?: 'horizontal' | 'vertical' = 'vertical'
   overflowMode?: 'wrap' | 'truncate' = 'truncate'
   renderActionBar?: ('all' | Set<Key>) => ReactElement
   renderEmptyState?: (GridListRenderProps) => ReactNode
   selectedKeys?: 'all' | Iterable<Key>
   selectionStyle?: 'highlight' | 'checkbox' = 'checkbox'
   shouldSelectOnPressUp?: boolean
   slot?: string | null
   styles?: StylesPropWithHeight
 }

LFDanLu added 2 commits March 10, 2026 14:02

fix: expandable table rows keyboard navigation during DnD

2a6a820

this is specifcally handling the case where the user navigates upwards through nested row drop targets

update drop target keyboard navigation logic to be more resilient to …

777920c

…new collections instead

github-actions bot added the RAC label Mar 10, 2026

LFDanLu changed the title ~~Table dnd expandable~~ fix: Fix keyboard DnD navigation in expandable rows RAC Table Mar 10, 2026

fix lint

6094397

LFDanLu added the ready for review label Mar 10, 2026

snowystinger reviewed Mar 10, 2026

View reviewed changes

snowystinger reviewed Mar 11, 2026

View reviewed changes

LFDanLu added 2 commits March 13, 2026 15:13

review comments

ef05f09

copy pasta

ceb54e4

devongovett approved these changes Mar 13, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: Fix keyboard DnD navigation in expandable rows RAC Table #9773

fix: Fix keyboard DnD navigation in expandable rows RAC Table #9773
LFDanLu wants to merge 5 commits intomainfrom
table_dnd_expandable

LFDanLu commented Mar 10, 2026

Uh oh!

rspbot commented Mar 10, 2026

Uh oh!

snowystinger left a comment

Uh oh!

LFDanLu commented Mar 10, 2026

Uh oh!

snowystinger Mar 11, 2026

Uh oh!

devongovett Mar 13, 2026

Uh oh!

rspbot commented Mar 13, 2026

Uh oh!

rspbot commented Mar 13, 2026

Uh oh!

rspbot commented Mar 13, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

LFDanLu commented Mar 10, 2026

✅ Pull Request Checklist:

📝 Test Instructions:

🧢 Your Project:

Uh oh!

rspbot commented Mar 10, 2026

Uh oh!

snowystinger left a comment

Choose a reason for hiding this comment

Uh oh!

LFDanLu commented Mar 10, 2026

Uh oh!

snowystinger Mar 11, 2026

Choose a reason for hiding this comment

Uh oh!

devongovett Mar 13, 2026

Choose a reason for hiding this comment

Uh oh!

rspbot commented Mar 13, 2026

Uh oh!

rspbot commented Mar 13, 2026

Uh oh!

rspbot commented Mar 13, 2026

react-aria-components

/react-aria-components:GridList

/react-aria-components:GridListProps

/react-aria-components:TreeEmptyStateRenderProps

@react-aria/utils

/@react-aria/utils:getNonce

@react-spectrum/s2

/@react-spectrum/s2:CardView

/@react-spectrum/s2:ListView

/@react-spectrum/s2:CardViewProps

/@react-spectrum/s2:ListViewProps

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants