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

[duane-j-wagner]

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

[duane-j-wagner]

Clone this repo: https://github.com/duane-j-wagner/drag-drop
get the required tools like nodejs @ionic/cli, Xcode or Android Studio, etc
run it on a device: ionic open iOS

[crisbeto]

Is the window your scrollable container or is it another element with overflow: auto? If it's the latter, you'll have to add the cdkScrollable attribute to it.

[duane-j-wagner]

The scrollable container is generated inside the <ion-content> tag. I can only access it with a function. How do I attach the cdkScrollable attribute to an HTMLElement variable in a function?

[andrewseguin]

Is there anything specific to Ionic that is causing this issue? Otherwise please reproduce this in a Stackblitz so we can diagnose. Otherwise we will be unable to reproduce ourselves

[duane-j-wagner]

Here is a stackblitz
The best way to test is on a real device (phone, tablet). Even on a desktop this stackblitz reveals some problems.