adobe / adobe/react-spectrum

Can't restrict Table drag to a drag handle

Open
#9,739 5 comments 2 reactions 0 assignees View on GitHub
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

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 ``, but the whole row is still draggable.

Image

### 🤔 Expected Behavior?

In a Table, adding `` 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_

Contributor guide

Open the contributing guide

Research direction

Start by reproducing the issue in react-aria-components 1.11.0 with a Table containing editable fields and a Button using the drag slot. Trace how Table handles the drag slot and row dragging. Done means text selection no longer starts a drag, and dragging starts only from the Button handle in Chrome on macOS.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.