onSelectionChange={setSelectedKey} not returning the key of the selected item

[repli-a]

I have assigned keys to my rows explicitly and followed the instructions in the documentation very closely, but when I try to use setSelectedKey and then read the value of selectedKey I get back null.

  let [seqArray, setSeqArray] = useState([]);
  let [clipArray, setClipArray] = useState([]);
  let [selectedKey, setSelectedKey] = useState(null);

function SeqTable({ seqArray, selectedKey, setSelectedKey }) {
if (seqArray.length === 0) {
  return (
          <TableView
aria-label="Sequence table"
density="compact"
overflowMode='wrap'
selectedKey={selectedKey}
onSelectionChange={setSelectedKey}
height="size-2400"

>
<TableHeader>
<Column key='name' align='center'>Seq. Name</Column>
<Column key='origStatus' align='center'>Status</Column>
<Column key='origSize' align='center'>Size</Column>
<Column key='proxyStatus' align='center'>Proxy Status</Column>
<Column key='proxySize' align='center'>Proxy Size</Column>
<Column key='totalSize' align='center'>Total Size</Column>
</TableHeader>
<TableBody>
</TableBody>
</TableView>
  )
} else {
    return (
    <TableView
aria-label="Sequence table"
selectionMode="single"
selectionStyle='highlight'
density="compact"
overflowMode='wrap'
height="size-2400"
selectedKey={selectedKey}
onSelectionChange={setSelectedKey}
defaultSelectedKeys={["000f4246"]}
>
<TableHeader>
<Column key='name' align='center'>Seq. Name</Column>
<Column key='origStatus' align='center'>Status</Column>
<Column key='origSize' align='center'>Size</Column>
<Column key='proxyStatus' align='center'>Proxy Status</Column>
<Column key='proxySize' align='center'>Proxy Size</Column>
<Column key='totalSize' align='center'>Total Size</Column>
</TableHeader>
<TableBody items={seqArray}>
{item => (
  <Row key={item.id}>
    {columnKey => columnKey.includes("Status") ? <Cell><SeqButton item={item} columnKey={columnKey}/></Cell> : <Cell>{item[columnKey]}</Cell>}
  </Row>
)}
</TableBody>
</TableView>
);
}
}

<SeqTable seqArray={seqArray} selectedKey={selectedKey} onSelectionChange={setSelectedKey}/>

I can confirm that the keys are not being seen because when I specify a default key the corresponding item is not selected.

What exactly is onSelectionChange passing to setSelectedKey? Is there a specific field or element that the key needs to be on in order to be picked up? Currently I have it assigned to the row, reasoning that the row is what is being selected/highlighted.

[repli-a]

I have read and followed the documentation here:

https://react-spectrum.adobe.com/react-stately/selection.html
https://react-spectrum.adobe.com/react-stately/SelectionManager.html
https://react-spectrum.adobe.com/react-spectrum/TableView.html

[reidbarber]

defaultSelectedKeys is for the un-controlled use case, so it shouldn't be used if you're also using selectedKeys. Instead, you should include the initial selected keys when you initialize your state of selected keys. Also, the prop is selectedKeys, not selectedKey so that may be causing issues as well.

  let [selectedKeys, setSelectedKeys] = useState(["000f4246"]);

[repli-a]

Hey Reid,

Thanks for the information.

I don't have a requirement to have a default selected key, that was just a leftover from my attempts to validate that the keys in the items were being found. It seems they are not, no matter what I specify as the key. The main issue is that I do not get feedback from selection events and cannot retrieve or store the user's selection in state in order to trigger some other action specific to the object that row represents.

Where are onSelectionChange, setSelectionKeys, and selectedKeys looking for the keys? Do they need to be stored in a particular element, like the row tag or a cell tag? Does it need to be formatted or named a certain way? Do I need to use a certain function syntax? Is the expectation that if I adhere to the following code (from here) exactly that I will have predictable results?

function PokemonTable(props) {
  let columns = [
    { name: 'Name', uid: 'name' },
    { name: 'Type', uid: 'type' },
    { name: 'Level', uid: 'level' }
  ];

  let rows = [
    { id: 1, name: 'Charizard', type: 'Fire, Flying', level: '67' },
    { id: 2, name: 'Blastoise', type: 'Water', level: '56' },
    { id: 3, name: 'Venusaur', type: 'Grass, Poison', level: '83' },
    { id: 4, name: 'Pikachu', type: 'Electric', level: '100' }
  ];

  let [selectedKeys, setSelectedKeys] = React.useState<Selection>(new Set([2]));

  return (
    <TableView
      aria-label="Table with controlled selection"
      selectionMode="multiple"
      selectedKeys={selectedKeys}
      onSelectionChange={setSelectedKeys}
      {...props}
    >
      <TableHeader columns={columns}>
        {(column) => (
          <Column
            key={column.uid}
            align={column.uid === 'level' ? 'end' : 'start'}
          >
            {column.name}
          </Column>
        )}
      </TableHeader>
      <TableBody items={rows}>
        {(item) => (
          <Row>
            {(columnKey) => <Cell>{item[columnKey]}</Cell>}
          </Row>
        )}
      </TableBody>
    </TableView>
  );
}

I made use of selectedKey after having tried selectedKeys becuase the react-stately documentation suggests there is a selectedKey variant intended for single selections that takes a single argument: [](https://react-spectrum.adobe.com/react-stately/selection.html#single-selection)

[reidbarber]

So it will use the key or id property of the items you pass in as the key. In the above example, id is used.

As for the stately link you posted, that applies to single selection components, and table is multiple selection. The props table should have everything you need.

Here is an example where the onSelectionChange handler is moved out and you can see what keys are passed:

https://codesandbox.io/s/nostalgic-dewdney-b8v3c4?file=/src/App.js

[repli-a]

This worked. You rock, saved my day. Thank you.

[repli-a]

This is great, thanks.

I am unable to reproduce the issue I'm having with a slightly modified configuration in CodeSandbox. State has been lifted to the parent object so that it can interact with another table in my case. I wonder if that is the issue? I am also using this with CEP so even odds it's just some weird bug because of that. Using selectedKeys vs selectedKey also breaks the table highlighting (in CEP at least). No errors in the console though.

https://codesandbox.io/s/heuristic-currying-55p307?file=/src/App.js

[reidbarber]

Yeah, selectedKey is not a prop on TableView https://react-spectrum.adobe.com/react-spectrum/TableView.html#props. Also you don't want to set selectedKeys to null. You should instead use an empty set or empty array. Using typescript could help with some of these issues.

[Lock23Supply]

Why return "all" instead of just all the selected keys? Is there a way of changing that behaviour?

[snowystinger]

Please see https://react-spectrum.adobe.com/react-stately/selection.html#select-all