Skip to content

Conversation

@romansndlr
Copy link
Contributor

@romansndlr romansndlr commented Dec 26, 2025

Motivation

We want to allow a user to browse the list using their keyboard without "persisting" the selection.

This is consistent with many implementations out in the wild:

  1. https://vercel.com/geist/multi-select
  2. https://druids.datadoghq.com/components/facets/Facet

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

  1. Render a GridList with selectionBehavior="replace" and selectionMode="multiple"
  2. By default, focusing an item with keyboard should select it
  3. Add selectOnFocus={false} to the GridList
  4. Now focusing an item with keyboard should NOT automatically select it - selection should only occur on explicit press/click
<GridList
  selectionMode="multiple"
  selectionBehavior="replace"
  selectOnFocus={false}
>
  <GridListItem id="1">Item 1</GridListItem>
  <GridListItem id="2">Item 2</GridListItem>
  <GridListItem id="3">Item 3</GridListItem>
</GridList>

@romansndlr
Copy link
Contributor Author

@snowystinger @LFDanLu

Would love your review on this one please 🙏🏻

@snowystinger
Copy link
Member

Thanks for the PR, the team is currently on holiday. We'll review when we are back in the new year.
❤️

Copy link
Member

@snowystinger snowystinger left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would just using 'Option + Arrow Down/Up' to navigate via keyboard without selecting on focus work for you without needing these changes? Selection is pretty complex, so it'd be better if we didn't need to add another option.

linkBehavior?: 'action' | 'selection' | 'override',
/**
* Whether selection should occur automatically on focus.
* @default true (when selectionBehavior is 'replace')
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

should this be disregarded if selectionBehaviour is not replace?

it('should not select on focus when selectOnFocus={false} with multiple selection', async () => {
let onSelectionChange = jest.fn();
let {getAllByRole} = render(
<GridList aria-label="Test" selectionMode="multiple" selectionBehavior="replace" selectOnFocus={false} onSelectionChange={onSelectionChange}>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

how does one select multiple in replace? does shift+arrow down work?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants