Keyboard activation of drag and drop in react-aria-components Table fails with "can't access property key, column is undefined"
- Dominant language
- TypeScript
- Stars
- 15.9k
- Forks
- 1.6k
- Avg merge
- 3d 9m
- Merged PRs (30d)
- 59
Description
### Provide a general summary of the issue here
For the react-aria-components `Table` with the `useDragAndDrop` hook, when using keyboard navigation to select the drag and drop indicator, the selection fails with the error: "can't access property key, column is undefined". However, using the mouse to drag and drop works properly. The root cause appears to be that the `cell` variable at [L193](https://github.com/adobe/react-spectrum/blob/ee53a795f4a2200b8bac9d3cb2082e5ee62ce6d6/packages/react-aria-components/src/Table.tsx#L193) incorrectly contains a `row` during keyboard selection, which means the index of the row could be greater than the max size of `columns`. This results in an undefined column and the error above.
In correct calls of getTextValue, cell is set to type = "cell" and the index is bounded by column size:
On keyboard selection, cell is set to type = "item", representing a row of data, and the index is bounded incorrectly by row size:
Previously, I used react-aria-components v1.4.1 which didn't have this issue. When upgrading to react-aria-components 1.12.1, I ran into this issue.
### 🤔 Expected Behavior?
The expected behavior is what is shown on the documentation site at: https://react-spectrum.adobe.com/react-aria/Table.html#reorderable. Keyboard navigation and selection of the drag and drop indicator should work properly with "enter" for selection and arrow keys to drag and drop.
### 😯 Current Behavior
Currently, keyboard selection throws an error for drag and drop when the number of rows is greater than the number of columns. This is because the index of the "row" is used instead of the index of the "cell" on keyboard selection, and columns[row.index] can return undefined if the number of rows is greater than the number of columns
### 💁 Possible Solution
A quick solution be a check for cell.type to make sure it is "cell" rather than "item", which can be added to [Table.tsx code](https://github.com/adobe/react-spectrum/blob/ee53a795f4a2200b8bac9d3cb2082e5ee62ce6d6/packages/react-aria-components/src/Table.tsx#L195). Another check could be ensuring the row computed in getTextValue has type "item" instead of "tablebody".
However, this wouldn't address the root problem of why the tablebody + row is being accessed instead of the row + cell inside the function, on keyboard selection only (mouse interactions work correctly). I'm hoping the team would have more insight on what causes this behavior and potential fixes!
### 🔦 Context
_No response_
### 🖥️ Steps to Reproduce
https://codesandbox.io/p/devbox/nostalgic-snyder-k3qcy7?workspaceId=ws_TPcixFMV8nsJkNho7e7pFT
This code sandbox shows the example from https://react-spectrum.adobe.com/react-aria/Table.html#reorderable with two additional rows added. When using keyboard to navigate to the drag + drop indicator and selecting with "enter", you will see the error. Using latest version of react-aria-components.
### Version
V1.13 of react-aria-components
### What browsers are you seeing the problem on?
Firefox
### If other, please specify.
Chrome as well, likely others
### What operating system are you using?
MacOS
### 🧢 Your Company/Team
_No response_
### 🕷 Tracking Issue
_No response_
Contributor guide
Assessment
This issue has not been assessed yet.