Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

bug(cdk/drag-drop): Cannot drag without scrolling on mobile devices. #21749

Closed
shervin01 opened this issue Jan 30, 2021 · 3 comments · Fixed by #21752
Closed

bug(cdk/drag-drop): Cannot drag without scrolling on mobile devices. #21749

shervin01 opened this issue Jan 30, 2021 · 3 comments · Fixed by #21752
Assignees
@crisbeto
Labels
area: cdk/drag-drop P2 The issue is important to a large percentage of users, with a workaround

Comments

@shervin01
Copy link

This change (#21227) has broken dragging on mobile devices. On mobile dragging will also trigger scroll. To reproduce go here on a mobile device or use chrome's toggle device tool bar: https://material.angular.io/cdk/drag-drop/examples

Reproduction

Steps to reproduce:

  1. go here on a mobile device or use chrome's toggle device tool bar: https://material.angular.io/cdk/drag-drop/examples
  2. then scroll down a bit.
  3. then try to drag one of the boxes. You can see that screen also scrolls.

Expected Behavior

Screen should not scroll while dragging. You can see the desired behavior here: https://v10.material.angular.io/cdk/drag-drop/examples

Actual Behavior

Screen/Document scrolls while dragging

Environment

  • Angular: 11.1.1
  • CDK/Material: 11.1.1
  • Browser(s): Chrome
  • Operating System (e.g. Windows, macOS, Ubuntu): Tested on Android as well as Desktop chrome with toggle device set to iPhoneX
@shervin01 shervin01 added the needs triage This issue needs to be triaged by the team label Jan 30, 2021
crisbeto added a commit to crisbeto/material2 that referenced this issue Jan 30, 2021
@crisbeto
fix(cdk/drag-drop): not blocking initial move event
03c6878 
In angular#21382 the `preventDefault` call was moved further down so it doesn't prevent events until
the dragging threshold has been reached. The problem is that it'll only start calling `preventDefault`
from the first event __after__ the threshold has been reached which can be enough time for the device
to start scrolling.

These changes add an extra call as soon as dragging has been considered as "started".

Fixes angular#21749.
@crisbeto crisbeto mentioned this issue Jan 30, 2021
Merged
@crisbeto
Copy link
Member

crisbeto commented Jan 30, 2021 •
edited
Loading

It's unlikely that #21227 introduced it since stopPropagation doesn't have an effect over whether scroll events are blocked. This likely happened in #21382 which accidentally made it so scrolling only gets blocked on the second touchmove event. I've submitted #21752 which should resolve it.

@crisbeto crisbeto self-assigned this Jan 30, 2021
@crisbeto crisbeto added area: cdk/drag-drop has pr P2 The issue is important to a large percentage of users, with a workaround and removed needs triage This issue needs to be triaged by the team labels Jan 30, 2021
@shervin01
Copy link
Author

@crisbeto Yes you are correct. Thanks for looking into this.

annieyw pushed a commit that referenced this issue Feb 5, 2021
@crisbeto
fix(cdk/drag-drop): not blocking initial move event (#21752)
060ab9e 
In #21382 the `preventDefault` call was moved further down so it doesn't prevent events until
the dragging threshold has been reached. The problem is that it'll only start calling `preventDefault`
from the first event __after__ the threshold has been reached which can be enough time for the device
to start scrolling.

These changes add an extra call as soon as dragging has been considered as "started".

Fixes #21749.
annieyw pushed a commit that referenced this issue Feb 5, 2021
@crisbeto @annieyw
fix(cdk/drag-drop): not blocking initial move event (#21752)
ea38302 
In #21382 the `preventDefault` call was moved further down so it doesn't prevent events until
the dragging threshold has been reached. The problem is that it'll only start calling `preventDefault`
from the first event __after__ the threshold has been reached which can be enough time for the device
to start scrolling.

These changes add an extra call as soon as dragging has been considered as "started".

Fixes #21749.

(cherry picked from commit 060ab9e)
annieyw pushed a commit that referenced this issue Feb 5, 2021
@crisbeto @annieyw
fix(cdk/drag-drop): not blocking initial move event (#21752)
518f1d0 
In #21382 the `preventDefault` call was moved further down so it doesn't prevent events until
the dragging threshold has been reached. The problem is that it'll only start calling `preventDefault`
from the first event __after__ the threshold has been reached which can be enough time for the device
to start scrolling.

These changes add an extra call as soon as dragging has been considered as "started".

Fixes #21749.

(cherry picked from commit 060ab9e)
wagnermaciel pushed a commit to wagnermaciel/components that referenced this issue Feb 8, 2021
@crisbeto @wagnermaciel
fix(cdk/drag-drop): not blocking initial move event (angular#21752)
9584935 
In angular#21382 the `preventDefault` call was moved further down so it doesn't prevent events until
the dragging threshold has been reached. The problem is that it'll only start calling `preventDefault`
from the first event __after__ the threshold has been reached which can be enough time for the device
to start scrolling.

These changes add an extra call as soon as dragging has been considered as "started".

Fixes angular#21749.
wagnermaciel pushed a commit to wagnermaciel/components that referenced this issue Feb 8, 2021
@crisbeto @wagnermaciel
fix(cdk/drag-drop): not blocking initial move event (angular#21752)
d51452b 
In angular#21382 the `preventDefault` call was moved further down so it doesn't prevent events until
the dragging threshold has been reached. The problem is that it'll only start calling `preventDefault`
from the first event __after__ the threshold has been reached which can be enough time for the device
to start scrolling.

These changes add an extra call as soon as dragging has been considered as "started".

Fixes angular#21749.
@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Mar 8, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@crisbeto crisbeto

Labels
area: cdk/drag-drop P2 The issue is important to a large percentage of users, with a workaround
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(cdk/drag-drop): not blocking initial move event crisbeto/material2
2 participants
@crisbeto @shervin01