adobe / adobe/react-spectrum

Drag and Drop behaviour and components not working on mobile devices and browsers

Open
#10,590 1 comment 0 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've been using this component https://react-aria.adobe.com/dnd#multiple-positions and i noticed the drag and drop doesn't work on mobile devices neither on desktops with Mobile inspector ON from the DevTools.

Tested both on Safari and Chrome both on mobile and desktop.

### 🤔 Expected Behavior?

I expected the drag and drop to work on mobile devices as well but i know there could be conflicts with native functionalities likes, scroll, context menu and so on so i would like to know if there is a knows workaround without doing a separate mobile version of my component with a custom drag implementation.

### 😯 Current Behavior

Works perfectly on desktops but not on mobile devices.
I've noted it doesn't work on mobile device neither on your documentation site page https://react-aria.adobe.com/dnd#multiple-positions.

### 💁 Possible Solution

_No response_

### 🔦 Context

Not working on mobile devices.

### 🖥️ Steps to Reproduce

Implement component and test drag and drop from mobile devices.

### Version

"react-aria-components": "1.10.1",

### What browsers are you seeing the problem on?

Other

### If other, please specify.

All major browsers both mobile and desktops (with mobile devtools on)

### What operating system are you using?

MacOS 26.6.2 (25G83)

### 🧢 Your Company/Team

_No response_

### 🕷 Tracking Issue

_No response_

Contributor guide

Open the contributing guide

Research direction

Start with the drag-and-drop example at https://react-aria.adobe.com/dnd#multiple-positions and reproduce the behavior using react-aria-components 1.10.1 in mobile Safari and Chrome, including desktop mobile emulation. Then trace the React Aria drag-and-drop entry point to determine the intended mobile behavior; done means an agreed fix or documented workaround that works without a separate mobile implementation.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
accessibility, frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Active
Clarity
Needs clarification
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.