adobe / adobe/react-spectrum

Feature request: Option to restrict mouse selection to checkbox only (`slot="selection"`) in GridList/ListBox

Open
#9,610 1 comment 2 reactions 0 assignees View on GitHub
enhancement 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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.