Can't restrict Table drag to a drag handle

[distinctdan]

Provide a general summary of the issue here

I'm trying to use Table with drag-and-drop. Each row has editable fields, and when you try to select the text in the field, the whole row starts dragging instead. In my Table, I added a button like the docs said like with a drag slot <Button slot="drag">, but the whole row is still draggable.

🤔 Expected Behavior?

In a Table, adding <Button slot="drag"> should act as a drag handle, so that drags can only start by dragging the button.

😯 Current Behavior

It doesn't work, the whole row is still draggable.

💁 Possible Solution

No response

🔦 Context

No response

🖥️ Steps to Reproduce

Drag the row

Version

1.11.0 react-aria-components

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

Mac

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[stevegreco]

I am fairly confident that this is how native HTML drag and drop works, the entire row is draggable, and therefore not really compatible with editable cells. My understanding is that the slot="drag" is mainly for keyboard navigation and screen readers.

Are there some examples of other libraries that have this functionality?

Ideally I think some alternative patterns here would be

1. Have an "Edit" option and open a Modal or Drawer to edit fields in the row
2. Allow for toggling the drag behavior, basically have two modes, "Edit" and "Reorder"

[distinctdan]

Are there some examples of other libraries that have this functionality?

Of course there are, drag and drop handles have been a thing pretty much since drag and drop was invented. If you do some googling, you can easily find examples. Here's a nice one from dnd-kit: https://dndkit.com/react/hooks/use-sortable.

Other patterns are possible, but they provide a worse user experience where it's inconvenient to edit multiple rows quickly. We shouldn't sacrifice user experience just to work around library limitations, especially when other libraries do support this feature, as well as other features like animations and physically moving the dragged object instead of a ghost of it.

[reidbarber]

Just started an initial PR here: #9745

This likely needs a lot more discussion, but it's a start.

[distinctdan]

Great! Thanks for taking a look!