feat: Support textfields and other interactive components in Gridlists by LFDanLu · Pull Request #10195 · adobe/react-spectrum

LFDanLu · 2026-06-12T17:46:26Z

Closes #4674, partially handles #2328

✅ 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:

Test GridList/Tree with textfield stories and test keyboardNavigationBehavior=tab behavior. You should be able to interact/type/etc with the interactive elements without causing focus navigation/row selection even if you use the arrow keys/Enter/Space/etc. It should require Tab from the cell/row to the cell/row's content to interact with the children, and Shift-Tab back to the cell/row to perform row navigation/selection via arrow keys/Enter/Space as usual.

Test the same in S2 CardView/TagGroup.

🧢 Your Project:

RSP

…ection when in input field

the failing tests didnt focus the element when triggering a keypress

…nts other than tab

rspbot · 2026-06-12T17:50:52Z

Build successful! 🎉

rspbot · 2026-06-12T17:53:22Z

Build successful! 🎉

nwidynski · 2026-06-12T19:47:56Z

+          <Toolbar aria-label="Text formatting" style={{gap: 4}}>
+            <Button onPress={action('Bold press')}>Bold</Button>
+            <Button onPress={action('Italics press')}>Italic</Button>
+            <Button onPress={action('Underline press')}>Underline</Button>
+          </Toolbar>


Tabbing while focus is on button yields focus on the menu trigger in the adjacent cell. In this case the sibling also appears to fail at recognizing focus within?

this actually turned out to be due to a stopPropagation we added to toolbar keyboard handling as a result of some other work, should work now

nwidynski · 2026-06-12T20:03:30Z

@@ -181,36 +187,10 @@ export function useGridListItem<T>(
    let walker = getFocusableTreeWalker(ref.current);


Unrelated to this PR, but surfaced especially with interactive content. I believe this is a bug. Arrow key movement should also respect tabbable attributes imo.

Same goes for useGridCell, see #8691 (comment)

thanks for bringing it up, will make a note but just a fyi that it probably won't make it in for the upcoming release since we are keeping it light

nwidynski · 2026-06-12T20:11:47Z

@@ -310,7 +290,7 @@ export function useGridListItem<T>(
    }


I saw Rob's comment in the keyboard PR about backwards tabbing, so I know you are aware of the issues with it.

Just wanted to raise the fix in https://github.com/adobe/react-spectrum/pull/7277/files#diff-ac8d9d018f61f2d88a6e491d488d043d4000e05ee9ff93df7a65032c2b9dbfedR261-R280 in case you want to include it in this cycle. Just replace the sibling check with a comparison of the data-collection attribute.

nwidynski · 2026-06-12T20:16:57Z

+          <TextField aria-label="Search">
+            <Input />
+          </TextField>{' '}
+          <Button>Go</Button>


Entering a value into the textfield, then shift tabbing to the row, then back into the field causes a text selection up to the prior caret position. Seems like shift is sticky somewhere?

I'm not sure I'm seeing this behavior, it seems to select all the text always for me regardless of caret position. This seems to match browser behavior as well: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input

nwidynski · 2026-06-12T20:20:00Z

+          ComboBox
+          <ComboBox aria-label="combobox" allowsEmptyCollection>
+            <div style={{display: 'flex'}}>
+              <Input />


Caret position cant be moved with arrow keys.

thanks for catching this, also seems to have been due to the keyboard shortcut handlers work that went in recently

…ou tab out of gridlist

This reverts commit 9e1b070.

…list_with_textfields

LFDanLu · 2026-06-12T22:42:24Z

@nwidynski just wanted to say thanks for looking and testing the changes here ❤️

rspbot · 2026-06-12T22:51:34Z

Build successful! 🎉

rspbot · 2026-06-12T22:51:35Z

## API Changes

react-aria-components

/react-aria-components:Tree

 Tree <T> {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean | FocusStrategy
   children?: ReactNode | (T) => ReactNode
   className?: ClassNameOrFunction<TreeRenderProps> = 'react-aria-Tree'
   defaultExpandedKeys?: Iterable<Key>
   defaultSelectedKeys?: 'all' | Iterable<Key>
   dependencies?: ReadonlyArray<any>
   disabledBehavior?: DisabledBehavior = 'all'
   disabledKeys?: Iterable<Key>
   disallowEmptySelection?: boolean
   dragAndDropHooks?: DragAndDropHooks<NoInfer<T>>
   escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
   expandedKeys?: Iterable<Key>
   id?: string
   items?: Iterable<T>
+  keyboardNavigationBehavior?: 'arrow' | 'tab' = 'arrow'
   onAction?: (Key) => void
   onExpandedChange?: (Set<Key>) => any
   onSelectionChange?: (Selection) => void
   render?: DOMRenderFunction<keyof React.JSX.IntrinsicElements, TreeRenderProps>
   selectedKeys?: 'all' | Iterable<Key>
   selectionBehavior?: SelectionBehavior = 'toggle'
   selectionMode?: SelectionMode
   shouldSelectOnPressUp?: boolean
   slot?: string | null
   style?: StyleOrFunction<TreeRenderProps>
 }

/react-aria-components:TreeProps

 TreeProps <T> {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean | FocusStrategy
   children?: ReactNode | (T) => ReactNode
   className?: ClassNameOrFunction<TreeRenderProps> = 'react-aria-Tree'
   defaultExpandedKeys?: Iterable<Key>
   defaultSelectedKeys?: 'all' | Iterable<Key>
   dependencies?: ReadonlyArray<any>
   disabledBehavior?: DisabledBehavior = 'all'
   disabledKeys?: Iterable<Key>
   disallowEmptySelection?: boolean
   dragAndDropHooks?: DragAndDropHooks<NoInfer<T>>
   escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
   expandedKeys?: Iterable<Key>
   id?: string
   items?: Iterable<T>
+  keyboardNavigationBehavior?: 'arrow' | 'tab' = 'arrow'
   onAction?: (Key) => void
   onExpandedChange?: (Set<Key>) => any
   onSelectionChange?: (Selection) => void
   render?: DOMRenderFunction<keyof React.JSX.IntrinsicElements, TreeRenderProps>
   selectedKeys?: 'all' | Iterable<Key>
   selectionBehavior?: SelectionBehavior = 'toggle'
   selectionMode?: SelectionMode
   shouldSelectOnPressUp?: boolean
   slot?: string | null
   style?: StyleOrFunction<TreeRenderProps>
 }

@react-aria/tree

/@react-aria/tree:AriaTreeProps

 AriaTreeProps <T> {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean | FocusStrategy
   children: CollectionChildren<T>
   defaultSelectedKeys?: 'all' | Iterable<Key>
   disabledBehavior?: DisabledBehavior = 'all'
   disabledKeys?: Iterable<Key>
   disallowEmptySelection?: boolean
   escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
   id?: string
   items?: Iterable<T>
+  keyboardNavigationBehavior?: 'arrow' | 'tab' = 'arrow'
   onAction?: (Key) => void
   onSelectionChange?: (Selection) => void
   selectedKeys?: 'all' | Iterable<Key>
   selectionMode?: SelectionMode
 }

@react-spectrum/tree

/@react-spectrum/tree:TreeView

 TreeView <T extends {}> {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   alignSelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'center' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'stretch'>
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean | FocusStrategy
   bottom?: Responsive<DimensionValue>
   children?: ReactNode | ({}) => ReactNode
   defaultExpandedKeys?: Iterable<Key>
   defaultSelectedKeys?: 'all' | Iterable<Key>
   disabledBehavior?: DisabledBehavior = 'all'
   disabledKeys?: Iterable<Key>
   disallowEmptySelection?: boolean
   end?: Responsive<DimensionValue>
   escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
   expandedKeys?: Iterable<Key>
   flex?: Responsive<string | number | boolean>
   flexBasis?: Responsive<number | string>
   flexGrow?: Responsive<number>
   flexShrink?: Responsive<number>
   gridArea?: Responsive<string>
   gridColumn?: Responsive<string>
   gridColumnEnd?: Responsive<string>
   gridColumnStart?: Responsive<string>
   gridRow?: Responsive<string>
   gridRowEnd?: Responsive<string>
   gridRowStart?: Responsive<string>
   height?: Responsive<DimensionValue>
   id?: string
   isHidden?: Responsive<boolean>
   items?: Iterable<T>
   justifySelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'center' | 'left' | 'right' | 'stretch'>
+  keyboardNavigationBehavior?: 'arrow' | 'tab' = 'arrow'
   left?: Responsive<DimensionValue>
   margin?: Responsive<DimensionValue>
   marginBottom?: Responsive<DimensionValue>
   marginEnd?: Responsive<DimensionValue>
   marginTop?: Responsive<DimensionValue>
   marginX?: Responsive<DimensionValue>
   marginY?: Responsive<DimensionValue>
   maxHeight?: Responsive<DimensionValue>
   maxWidth?: Responsive<DimensionValue>
   minHeight?: Responsive<DimensionValue>
   minWidth?: Responsive<DimensionValue>
   onAction?: (Key) => void
   onExpandedChange?: (Set<Key>) => any
   onSelectionChange?: (Selection) => void
   order?: Responsive<number>
   position?: Responsive<'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'>
   renderEmptyState?: () => JSX.Element
   right?: Responsive<DimensionValue>
   selectedKeys?: 'all' | Iterable<Key>
   selectionMode?: SelectionMode
   selectionStyle?: 'checkbox' | 'highlight'
   shouldSelectOnPressUp?: boolean
   start?: Responsive<DimensionValue>
   top?: Responsive<DimensionValue>
   width?: Responsive<DimensionValue>
   zIndex?: Responsive<number>
 }

/@react-spectrum/tree:SpectrumTreeViewProps

 SpectrumTreeViewProps <T> {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   alignSelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'center' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'stretch'>
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean | FocusStrategy
   bottom?: Responsive<DimensionValue>
   children?: ReactNode | (T) => ReactNode
   defaultExpandedKeys?: Iterable<Key>
   defaultSelectedKeys?: 'all' | Iterable<Key>
   disabledBehavior?: DisabledBehavior = 'all'
   disabledKeys?: Iterable<Key>
   disallowEmptySelection?: boolean
   end?: Responsive<DimensionValue>
   escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
   expandedKeys?: Iterable<Key>
   flex?: Responsive<string | number | boolean>
   flexBasis?: Responsive<number | string>
   flexGrow?: Responsive<number>
   flexShrink?: Responsive<number>
   gridArea?: Responsive<string>
   gridColumn?: Responsive<string>
   gridColumnEnd?: Responsive<string>
   gridColumnStart?: Responsive<string>
   gridRow?: Responsive<string>
   gridRowEnd?: Responsive<string>
   gridRowStart?: Responsive<string>
   height?: Responsive<DimensionValue>
   id?: string
   isHidden?: Responsive<boolean>
   items?: Iterable<T>
   justifySelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'center' | 'left' | 'right' | 'stretch'>
+  keyboardNavigationBehavior?: 'arrow' | 'tab' = 'arrow'
   left?: Responsive<DimensionValue>
   margin?: Responsive<DimensionValue>
   marginBottom?: Responsive<DimensionValue>
   marginEnd?: Responsive<DimensionValue>
   marginTop?: Responsive<DimensionValue>
   marginX?: Responsive<DimensionValue>
   marginY?: Responsive<DimensionValue>
   maxHeight?: Responsive<DimensionValue>
   maxWidth?: Responsive<DimensionValue>
   minHeight?: Responsive<DimensionValue>
   minWidth?: Responsive<DimensionValue>
   onAction?: (Key) => void
   onExpandedChange?: (Set<Key>) => any
   onSelectionChange?: (Selection) => void
   order?: Responsive<number>
   position?: Responsive<'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'>
   renderEmptyState?: () => JSX.Element
   right?: Responsive<DimensionValue>
   selectedKeys?: 'all' | Iterable<Key>
   selectionMode?: SelectionMode
   selectionStyle?: 'checkbox' | 'highlight'
   shouldSelectOnPressUp?: boolean
   start?: Responsive<DimensionValue>
   top?: Responsive<DimensionValue>
   width?: Responsive<DimensionValue>
   zIndex?: Responsive<number>
 }

rspbot · 2026-06-12T22:51:37Z

Agent Skills Changes

Modified (7)

react-aria/skills/react-aria/references/components/ComboBox.md $\color{green}{+3}$ $\color{red}{-1}$
react-aria/skills/react-aria/references/components/GridList.md $\color{green}{+46}$
react-aria/skills/react-aria/references/components/Tree.md $\color{green}{+62}$ $\color{red}{-4}$
s2/skills/react-spectrum-s2/references/components/TreeView.md $\color{red}{-1}$
s2/skills/react-spectrum-s2/references/react-aria/components/ComboBox.md $\color{green}{+3}$ $\color{red}{-1}$
s2/skills/react-spectrum-s2/references/react-aria/components/GridList.md $\color{green}{+46}$
s2/skills/react-spectrum-s2/references/react-aria/components/Tree.md $\color{green}{+62}$ $\color{red}{-4}$

Install

React Spectrum S2:

npx skills add https://d1pzu54gtk2aed.cloudfront.net/pr/8a4e0b4de38fc3be5613016346d35cf4ee17099a/

React Aria:

npx skills add https://d5iwopk28bdhl.cloudfront.net/pr/8a4e0b4de38fc3be5613016346d35cf4ee17099a/

devongovett

approving for testing

devongovett · 2026-06-12T23:23:58Z

+By default, GridList uses arrow key navigation to move focus into rows. Set `keyboardNavigationBehavior="tab"` to have <Keyboard>Tab</Keyboard> move focus in and out of a row.
+Use this when rows contain interactive elements such as text fields, where arrow keys and typing in the field should not trigger grid navigation or selection.
+
+```tsx render


Perhaps not the most realistic example... maybe we can think about it

devongovett · 2026-06-12T23:32:33Z

+## Keyboard navigation
+
+By default, GridList uses arrow key navigation to move focus into rows. Set `keyboardNavigationBehavior="tab"` to have <Keyboard>Tab</Keyboard> move focus in and out of a row.
+Use this when rows contain interactive elements such as text fields, where arrow keys and typing in the field should not trigger grid navigation or selection.


Perhaps a little confusing because the starter example uses keyboardNavigationBehavior="tab" by default already since it is a grid layout...

Use keyboardNavigationBehavior="tab" to allow users to tab to focusable elements within an item. When focus is on an item itself, users can navigate between items via the arrow keys. When focus is within an item, the arrow keys control the focused element (e.g. moving the cursor in a text field).

Not sure how much we want to explain in the docs though.

devongovett · 2026-06-12T23:33:04Z


+## Keyboard navigation
+
+By default, Tree uses arrow key navigation to move focus into rows. Set `keyboardNavigationBehavior="tab"` to have <Keyboard>Option</Keyboard> move focus in and out of a row.


I guess this should be Tab rather than Option? But make this description match whatever we end up with for GridList.

devongovett · 2026-06-12T23:38:40Z

+  };
+
+  let baseOnMouseDown = rowProps.onMouseDown;
+  rowProps.onMouseDown = (e: ReactMouseEvent<FocusableElement>) => {


We can discuss whether these overrides should just go in useSelectableItem at some point. Seems like these would always apply, not just in grid list?

LFDanLu added 8 commits June 12, 2026 10:32

initial changes to support textfields in gridlists

27eae61

use robs event leak type select and prevent space from triggering sel…

5ab7678

…ection when in input field

fix tests, but also use a more robust check instead of active element

9227d33

the failing tests didnt focus the element when triggering a keypress

add S2 Card story and tests for tree and gridlist

d1ccfa6

make presses on components in rows not trigger selection

cc8e6b1

add docs for rac

158d3ce

update docs and dedupe tree logic in useGridListItem keyboard handlers

e66db0b

pull other updates from other branch and change to stop all other eve…

f350944

…nts other than tab

github-actions Bot added ComboBox TreeView S2 Tree labels Jun 12, 2026

clean up outdated test comment

e872ea8

LFDanLu mentioned this pull request Jun 12, 2026

Grid navigation edit mode #2328

Open

nwidynski reviewed Jun 12, 2026

View reviewed changes

fix so that Tab from combobox and toolbar propagate upwards so that y…

7a88537

…ou tab out of gridlist

LFDanLu mentioned this pull request Jun 12, 2026

chore: Revert "feat: Keyboard shortcut handler" #10197

Merged

Revert "feat: Keyboard shortcut handler (#9929)"

c1343f9

This reverts commit 9e1b070.

LFDanLu added the release label Jun 12, 2026

github-actions Bot added the ActionBar label Jun 12, 2026

Merge branch 'main' of github.com:adobe/react-spectrum into only_grid…

ebe6f6a

…list_with_textfields

propagate tab in combobox so it exits the gridlist

8a4e0b4

github-actions Bot removed the ActionBar label Jun 12, 2026

LFDanLu added the ready for review label Jun 12, 2026

devongovett approved these changes Jun 12, 2026

View reviewed changes

		@@ -181,36 +187,10 @@ export function useGridListItem<T>(
		let walker = getFocusableTreeWalker(ref.current);


		## Keyboard navigation

		By default, Tree uses arrow key navigation to move focus into rows. Set `keyboardNavigationBehavior="tab"` to have <Keyboard>Option</Keyboard> move focus in and out of a row.

Conversation

LFDanLu commented Jun 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Pull Request Checklist:

📝 Test Instructions:

🧢 Your Project:

Uh oh!

rspbot commented Jun 12, 2026

Uh oh!

rspbot commented Jun 12, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

LFDanLu commented Jun 12, 2026

Uh oh!

rspbot commented Jun 12, 2026

Uh oh!

rspbot commented Jun 12, 2026

react-aria-components

/react-aria-components:Tree

/react-aria-components:TreeProps

@react-aria/tree

/@react-aria/tree:AriaTreeProps

@react-spectrum/tree

/@react-spectrum/tree:TreeView

/@react-spectrum/tree:SpectrumTreeViewProps

Uh oh!

rspbot commented Jun 12, 2026

Agent Skills Changes

Uh oh!

devongovett left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

LFDanLu commented Jun 12, 2026 •

edited

Loading