Some RAC ListBox drag-and-drop examples in the docs don't work on Chrome for Android

staticshock commented 3 weeks ago

Provide a general summary of the issue here

I've linked to a list of demos from the React Aria docs pages that don't work on Chrome for Android.

🤔 Expected Behavior?

Should roughly match what I see on desktop.

😯 Current Behavior

In all of the examples below, the items are draggable, but the drop area never activates. If I hover an item over it and let go, the drag action is cancelled.

💁 Possible Solution

🤷

🔦 Context

No response

🖥️ Steps to Reproduce

Try any of these demos on Chrome for Android:

Version

Whatever version your docs site is running

What browsers are you seeing the problem on?

Chrome

If other, please specify.

Chrome 124.0.6367.114

What operating system are you using?

Android 14; Pixel 6 Build/AP1A.240405.002

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

BenjaminLucier commented 3 weeks ago

Same issue for me.

LFDanLu commented 2 weeks ago

This is a known issue, typically we've had to add the following to whichever drop handler is being used to properly parse the dropped data for Android. We debated about adding this to the docs examples but felt it would just make them more complex/longer. We can definitely consider adding it to the examples or at least a call out somewhere in the docs.

staticshock commented 2 weeks ago

I've been working through a few issues in my own use of React Aria's DnD recently, especially on mobile, and I thought it was logical to check if the React Aria docs exhibit the same issues. If they do, I reasoned, then there's a bug in the framework, and if they don't, then the bug is probably on my end. It never even occurred to me that bugs in the React Aria docs would be deliberately there to make the code look simpler than it would be in reality, which is what I think you're suggesting.

LFDanLu commented 2 weeks ago

Yeah, we have been trying to find a good balance between making the docs informative yet not too dense/unapproachable. At the time we debated whether or not to include this snippet of code since it was quite specific but would need to be included in some fashion in every drop handler, but perhaps we could just have a FAQ section somewhere and link to it at the start of every DnD example section.

staticshock commented 2 weeks ago

In their current state, the docs are obviously very useful as a way to learn about the capabilities of the framework. It makes sense for each example to showcase a specific feature with the highest possible signal-to-noise ratio.

Deceptively, they also appear to be good reference implementations, even though it sounds like they aren't, and in retrospect I understand why they shouldn't strive to be. In my ideal world, whenever an example elides something that would have to be included in a real world implementation, it would be awesome to see a link to a reference implementation. "Warning: this example simplifies some things for the sake of illustration. For support across a wide range of devices, see this reference implementation."

(I'm not asking, by the way, just thinking out loud. In the grand scheme of things, I'd put much higher value on fixes to logic issues I've run into, such as the inconsistent handling of trackpads with tap-to-click enabled.)

adobe / react-spectrum