angular / angular/components

bug(Drag and Drop): autoscroll fails in full size web view

Open
#27,169 5 comments 0 reactions 0 assignees View on GitHub
area: cdk/scrolling P4
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

### Is this a regression?

- [ ] Yes, this behavior used to work in the previous version

### The previous version in which this bug was not present was

_No response_

### Description

When a hybrid mobile app (Ionic Capacitor) is made with a long list of draggable items, the autoscroll fails to engage. Take the same codebase and run it on a mobile browser, it fails. Run it on a desktop browser and it works.
Notice on a desktop browser that autoscrolling only begins when the cursor is outside the html page. It is not possible to get outside the page on a full screen mobile web view since touching outside that area is touching off the screen.

### Reproduction

Steps to reproduce:
1. Build a simple Ionic Capacitor mobile app with a list
2. Add CDK Drag and Drop elements to the list
3. Run it on a phone or phone browser.
4. Drag an item form the top to near the bottom.

### Expected Behavior

List should autoscroll up when touching near edge of phone.

### Actual Behavior

List fails to autoscroll.

### Environment

- Angular: 15.2.8
- CDK/Material: 15.2.9
- Browser(s): Safari, Safari Mobile
- Operating System (e.g. Windows, macOS, Ubuntu): macOS 12.6.6
- Ionic: 5.4.16
- Capacitor 5.0.3

Contributor guide

Open the contributing guide

Research direction

Reproduce the Angular CDK Drag and Drop behavior in the described Ionic Capacitor setup and on Safari Mobile, comparing it with desktop browser behavior. Investigate the autoscroll behavior during a drag near the phone's viewport edge; done means a long list autoscrolls when the dragged item reaches that edge.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend, mobile-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.