`useDrop()` cannot reliably filter custom MIME types on Chrome for Android

[josharens]

Provide a general summary of the issue here

There appears to be a bug in Chrome for Android that strips or ignores custom MIME types on data transfer objects used with drag events. This means that it is not possible to reliably restrict drop targets to custom drag types on Chrome for Android.

useDrag() requires returning items from getItems() in the form of { [mimeType]: data }. The recommended pattern for restricting drops is to use a custom MIME type (e.g. application/x-my-app-type) and then check for that type inside useDrop’s getDropOperation() callback.

This appears to work correctly on desktop browsers, but not on Chrome for Android because the aforementioned bug.

Custom MIME types set in getItems() are not present in types inside getDropOperation(). Therefore, getDropOperation() cannot distinguish between app-specific drags and arbitrary drags.

This means that the only available MIME types are standard ones like text/plain if you want to support drag and drop on Android.

Because getDropOperation() only receives the set of MIME types (not the actual data payload), there is no way to inspect the transferred data to determine whether the drag originated from the application.

🤔 Expected Behavior?

Technically this isn't a bug in React Aria itself, and there are workarounds I can employ, but it might be nice if getDropOperation() received more information besides just the drag item's MIME types. Perhaps it could receive the entire data transfer object for each item so that we can inspect the data within them.

I'm imagining I could return a drag item something like this: { 'text/plain': 'my-custom-string' }, and then in getDropOperation() check for my-custom-string.

😯 Current Behavior

On Chrome for Android, custom MIME types provided via useDrag’s getItems() (e.g. application/x-my-app-type) do not appear in the types set passed to useDrop’s getDropOperation() due to a bug in Chrome for Android. Only standard types such as text/plain are present. getDropOperation() only receives a set of MIME types and does not provide access to the underlying drag item data.

💁 Possible Solution

No response

🔦 Context

No response

🖥️ Steps to Reproduce

https://codesandbox.io/p/sandbox/determined-jasper-n8qpgn

Version

React Aria ^3.45.0

What browsers are you seeing the problem on?

Other

If other, please specify.

Chrome on Android

What operating system are you using?

Android 16

🧢 Your Company/Team

SmugMug

🕷 Tracking Issue

No response

[reidbarber]

This looks like a duplicate of #6365. See #6365 (comment)

I think we may want to add a notice to the docs about this.

[josharens]

I think #6365 is likely caused by the same underlying issue, but the suggested workaround in #6365 (comment) is a little different than what I'm suggesting here.

I think ideally I'd like to be able to somehow inspect the data associated with the drag items in getDropOperation(), not just the MIME types. That way I can prevent onDrop() from being called, and isDropTarget being true in the first place.