adobe
GridList does not consistently auto-scroll when dragging items beyond the last visible row
Provide a general summary of the issue here
In the GridList component, when attempting to move an item beyond the last visible row, the list should auto-scroll to allow the user to continue dragging the item. This feature works intermittently but is difficult for the user to utilize consistently.
🤔 Expected Behavior?
When dragging an item near the edge of the visible grid, the list should auto-scroll smoothly, allowing the user to drag the item beyond the current visible rows without difficulty.
😯 Current Behavior
The auto-scroll sometimes works but is inconsistent and makes it hard for the user to move items beyond the visible rows, resulting in a frustrating user experien
💁 Possible Solution
No response
🔦 Context
No response
🖥️ Steps to Reproduce
Steps to Reproduce
1. Open the GridList component with a sufficient number of items to require scrolling.
2. Attempt to move an item from a visible row beyond the last visible row by dragging it downward.
3. Observe that the list does not consistently auto-scroll, making it difficult to move the item to the desired position.
Version
"react-aria-components": "^1.3.0",
What browsers are you seeing the problem on?
Chrome
If other, please specify.
No response
What operating system are you using?
Mac
🧢 Your Company/Team
Acrobat Web
🕷 Tracking Issue
No response
I agree this behavior could use some improvement in terms of user experience. We would need to be careful about making sure any changes to this work well across different item sizes and scroll axes. I think we would want to adjust the values used here:
https://github.com/adobe/react-spectrum/blob/25f304dea3444cb89d40a7e55feb8693aa40eb74/packages/%40react-aria/dnd/src/useDroppableCollection.ts#L154-L157
FYI our custom autoscrolling logic only applies in Safari browsers. In Chrome and Firefox it is implemented by the browser itself, so not sure if that's something we could fix... https://github.com/adobe/react-spectrum/blob/25f304dea3444cb89d40a7e55feb8693aa40eb74/packages/%40react-aria/dnd/src/useAutoScroll.ts#L63-L67
It might be worth taking a look at how auto scroll was implemented for Pragmatic Drag and Drop: https://atlassian.design/components/pragmatic-drag-and-drop/optional-packages/auto-scroll/about
Hi,
Are there any updates on this topic?
We've found this to be a significant pain point during user testing. Users struggle to drag items within a scrollable container because they must position the item within a very narrow (approximately 5/10px) area at the container’s edge for it to scroll. This makes the interaction feel fiddly and unintuitive.
Other libraries, such as Pragmatic Drag and Drop and DnD Kit, handle this scenario much more gracefully, as mentioned above. Incorporating a similar approach would be a very welcome improvement to the library.
