Skip to content

Shift+click range selection doesn't work in multi-select Select/Picker (anchorKey lost in useSelectState) #10147

@plore

Description

@plore

Provide a general summary of the issue here

With Select / Picker in selectionMode="multiple", shift+click selects only the anchor and the shift-clicked item — not the range between them. The same gesture works correctly in ListBox, GridList, and Table.

Root cause: useSelectState stores the selection as a flat Key[] (value) and rebuilds the listbox's selectedKeys from it every render via convertValue. useMultipleSelectionState then constructs a fresh Selection whose
anchorKey/currentKey are null. Because SelectionManager.extendSelection reads selectedKeys.anchorKey, it never has an anchor to extend from, so the range collapses to the clicked item.

🤔 Expected Behavior?

Shift+click selects every item between the previously-clicked anchor and the shift-clicked target (like ListBox/GridList/Table), and shift+ArrowUp/Down extends the selection by keyboard.

😯 Current Behavior

Only the anchor and the target are selected; items in between are skipped. Re-shift-clicking from the same anchor does not re-extend the range.

💁 Possible Solution

Preserve the Selection's anchorKey/currentKey through useSelectState instead of flattening to a plain array and rebuilding via convertValue (which produces anchorKey: null). For example, let the inner useListState own the
Selection as the source of truth, or thread the anchor through alongside value.

🔦 Context

Building a multi-select dropdown where users expect ListBox-style range
selection. This can't be fixed in userland: the lossy Selection → Key[] → anchorless Selection round-trip is internal to useSelectState. This differs
from #7947 / #9543, which were closed as consumer-side Set reconstruction —
here the consumer has no control point.

🖥️ Steps to Reproduce

Minimal React Aria Components example:

import {Select, SelectValue, Label, Button, Popover, ListBox, ListBoxItem} from 'react-aria-components';

function Example() {
  return (
    <Select selectionMode="multiple">
      <Label>Items</Label>
      <Button><SelectValue /></Button>
      <Popover>
        <ListBox>
          <ListBoxItem id="1">One</ListBoxItem>
          <ListBoxItem id="2">Two</ListBoxItem>
          <ListBoxItem id="3">Three</ListBoxItem>
          <ListBoxItem id="4">Four</ListBoxItem>
          <ListBoxItem id="5">Five</ListBoxItem>
        </ListBox>
      </Popover>
    </Select>
  );
}
  1. Open the popover.
  2. Click "Two".
  3. Hold Shift and click "Five".

Expected: Two, Three, Four, Five are selected.
Actual: only Two and Five are selected.

Version

@adobe/react-spectrum@3.47.0, react-aria-components@1.17.0, react-stately@3.46.0.

What browsers are you seeing the problem on?

Chrome, Firefox

If other, please specify.

No response

What operating system are you using?

macOS 26.5

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions