adobe / adobe/react-spectrum

Autoscroll not working in a Popover in Safari

Open
#9,421 3 comments 0 reactions 0 assignees View on GitHub
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

Reordering items withing a GridList in Popover in Safari is unusable

https://github.com/user-attachments/assets/095442be-59c5-4b69-bfed-847288593f61

### 🤔 Expected Behavior?

It should scroll up when close to the top edge and bottom when close to the bottom edge

### 😯 Current Behavior

When trying to drag and drop an item within a GridList in Safari it automatically scrolls to the bottom if grabbing an element from the middle of the list and it's impossible to move the list back up

### 💁 Possible Solution

I have a fix locally that fixes that
- use absolute units instead of relative ones (`getBoundingClientRect().bottom - AUTOSCROLL_AREA_SIZE` instead of `getBoundingClientRect().height - AUTOSCROLL_AREA_SIZE`)
- I'm not sure how that affects other cases, but I'm willing to investigate and open a PR
- stop autoscroll in one axis if the item no longer needs it but still is close to the edge on the other axis
- added speed slope to the autoscroll to make it start slower

### 🔦 Context

It breaks autoscrolling in Safari

### 🖥️ Steps to Reproduce

Code for the above https://stackblitz.com/edit/sb1-efxdtmhi?file=src%2FApp.tsx

### Version

1.14.0

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

Safari

### What operating system are you using?

MacOS

### 🧢 Your Company/Team

Motion

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.