adobe / adobe/react-spectrum

drag and drop interactions sometimes cause the cursor "+" icon to flicker in Chrome

Open
#6,110 1 comment 4 reactions 0 assignees View on GitHub
drag and drop needs investigation
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 currently implementing drag and drop using react-aria and I'm noticing that, when dragging an item over a list that supports also being a drop target, the cursor tends to flicker with a "+" sign. You can see it quite obviously in this video:

https://github.com/adobe/react-spectrum/assets/1236841/84f0371e-f9db-456a-973e-f21d55e1d5b1

And I'm noticing the same issue in React Aria's `ListBox` example here: https://react-spectrum.adobe.com/react-aria/ListBox.html

https://github.com/adobe/react-spectrum/assets/1236841/9c1020b7-d4bc-4fd8-8900-e56cb83dfdb5

The flickering isn't limited to scroll type interactions, but that's where it tends to be most obvious. I'm unable to repro in Safari.

### 🤔 Expected Behavior?

I would expect the "+" to show up only if I'm copying the asset. Not just dragging it to re-order.

### 😯 Current Behavior

The "+" flickers in and out unexpectedly.

### 💁 Possible Solution

_No response_

### 🔦 Context

The flicker is confusing and distracting for our users.

### 🖥️ Steps to Reproduce

In Chrome, try dragging items in this example.

https://codesandbox.io/p/sandbox/dazzling-sun-mswjly

### Version

3.31.0

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

Chrome

### If other, please specify.

_No response_

### What operating system are you using?

Mac OS 14.3.1

### 🧢 Your Company/Team

Frame.io

### 🕷 Tracking Issue

_No response_

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.