drag and drop interactions sometimes cause the cursor "+" icon to flicker in Chrome
- 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
Assessment
This issue has not been assessed yet.