Feature request: Option to restrict mouse selection to checkbox only (`slot="selection"`) in GridList/ListBox
- Dominant language
- TypeScript
- Stars
- 15.9k
- Forks
- 1.6k
- Avg merge
- 3d 9m
- Merged PRs (30d)
- 59
Description
## Description
We're using `GridList` with `selectionMode="multiple"` and `selectionBehavior="toggle"` along with a `Checkbox slot="selection"` inside each `GridListItem`. This works beautifully for:
- Multi-select with checkboxes
- Shift+click range selection on checkboxes
- Keyboard navigation (arrow keys to move focus, Space to toggle selection)
However, we'd like users to be able to **select and copy text** within the grid list items. Currently, once any item is selected (entering "selection mode"), clicking anywhere on a row toggles selection, which conflicts with text selection.
## Use Case
Our grid items contain candidate profiles with names, job titles, company names, and other text that users frequently want to copy. The items also contain interactive elements (buttons, links). We chose `GridList` specifically because it handles focus management for these interactive children well.
We want:
- ✅ Checkbox clicks toggle selection
- ✅ Keyboard selection (Space) works
- ✅ Shift+click on checkboxes for range selection
- ❌ Clicking the row body should **not** toggle selection
- ✅ Text within the row should be selectable (`user-select: text`)
## Current Behavior
Per the [selection documentation](https://react-aria.adobe.com/selection):
> "Once items are selected, the list is in selection mode, and clicking or tapping a row toggles the selection."
But this only applies with `onAction`, which means it's pressable, which means it's always `user-selection: none`
## Proposed API
A prop on `GridList` (or `ListBox`/`Table`) to restrict mouse selection triggers to only the checkbox element:
```tsx
{/* This content is now text-selectable, clicks don't toggle selection */}
Alice Smith
Software Engineer at Acme Corp
```
### Alternative API ideas
1. **On the collection component:**
```tsx
// or
```
2. **On the item component:**
```tsx
```
3. **Boolean flag:**
```tsx
```
## Workaround
Currently we're considering using `onPointerDown={(e) => e.stopPropagation()}` on the content area to prevent clicks from reaching the selection handler. This works but feels fragile and may have unintended side effects on keyboard navigation or other behaviors.
## Related Issues
- #2585 - Table: Allow text selection (open since Nov 2021)
- #1787 - Added support for text selection when `selectionMode="none"`
Contributor guide
Assessment
This issue has not been assessed yet.