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:
"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:
<GridList
selectionMode="multiple"
selectionBehavior="toggle"
mouseSelectionTrigger="checkbox" // NEW: only Checkbox slot="selection" triggers mouse selection
>
<GridListItem id="1" textValue="Alice Smith">
<Checkbox slot="selection" />
<div>
{/* This content is now text-selectable, clicks don't toggle selection */}
<p>Alice Smith</p>
<p>Software Engineer at Acme Corp</p>
</div>
</GridListItem>
</GridList>Alternative API ideas
-
On the collection component:
<GridList mouseSelectionTrigger="checkbox" />
// or
<GridList allowsRowSelection={false} />
-
On the item component:
<GridListItem mouseSelectionTrigger="checkbox" />
-
Boolean flag:
<GridList checkboxSelectionOnly />
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
Description
We're using
GridListwithselectionMode="multiple"andselectionBehavior="toggle"along with aCheckbox slot="selection"inside eachGridListItem. This works beautifully for: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
GridListspecifically because it handles focus management for these interactive children well.We want:
user-select: text)Current Behavior
Per the selection documentation:
But this only applies with
onAction, which means it's pressable, which means it's alwaysuser-selection: noneProposed API
A prop on
GridList(orListBox/Table) to restrict mouse selection triggers to only the checkbox element:Alternative API ideas
On the collection component:
On the item component:
Boolean flag:
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
selectionMode="none"