Drag and Drop behaviour and components not working on mobile devices and browsers
- 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
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