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 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. 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