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

drag-drop: Drag delay does not allow scrolling on mobile devices #16224

Closed
Aboisier opened this issue Jun 6, 2019 · 2 comments · Fixed by #16228
Closed

drag-drop: Drag delay does not allow scrolling on mobile devices #16224

Aboisier opened this issue Jun 6, 2019 · 2 comments · Fixed by #16228

Comments

@Aboisier
Copy link
Contributor

Aboisier commented Jun 6, 2019

Reproduction

StackBlitz: https://angular-wls93x.stackblitz.io

Steps to reproduce:

  1. Create a draggable element with a start delay (cdkDragStartDelay) of 1 second
  2. Try scrolling by pressing on the draggable element as the start point and dragging immediately

Expected Behavior

Since the drag start delay was not elapsed when the scroll intention, I was expecting

  1. The drag to be cancelled
  2. To be able to scroll

Actual Behavior

  1. I was not able to scroll
  2. The drag element was teleported to my finger after the delay was elapsed (one second)

Environment

  • Angular: 8.0.1
  • CDK/Material: 8.0.0
  • Browser(s): Chrome (74.0.3729.169)
  • Operating System (e.g. Windows, macOS, Ubuntu): Windows
@Aboisier Aboisier mentioned this issue Jun 7, 2019
Merged
@Aboisier Aboisier changed the title Drag delay does not allow scrolling on mobile devices drag-drop: Drag delay does not allow scrolling on mobile devices Jun 18, 2019
jelbourn pushed a commit that referenced this issue Jul 9, 2019
@Aboisier @jelbourn
fix(drag-drop): fix drag start delay behavior to allow scrolling (#16228
738f10c 
)

The current implementation of the drag start delay does not allow scrolling on mobile devices.
Instead, the draggable element gets teleported to the cursor once the delay is elapsed.

In order to handle this use case, we cancel the drag sequence if the cursor moves before
the drag start delay is elapsed and we disable native drag interactions only when the
drag sequence is started instead of when it is initialized.

The drag start delay was also integrated to the drag drop demo.

Fixes #16224
Aboisier pushed a commit to cactusoft-ca/components that referenced this issue Jul 16, 2019
fix(drag-drop): fix drag start delay behavior to allow scrolling (ang…
7c55685 
…ular#16224)

The current implementation of the drag start delay does not allow scrolling on iOS devices.
Also, once the element has been scrolled once, the scrolling is never reenabled.

In order to fix this issue, we prevent default behaviour of pointer events fired after
the drag sequence has been started instead of initialized. Also, we toggle native
drag interactions when the drag sequence is ended.
@Aboisier
Copy link
Contributor Author

So it seems like there is still an issue with this. The native drag interactions are not toggled when the drag sequence is ended, which makes scrolling impossible after the item has been dragged once. Also, it does not work at all on iOS. I made another PR to fix this.

Aboisier pushed a commit to cactusoft-ca/components that referenced this issue Jul 16, 2019
fix(drag-drop): fix drag start delay behavior to allow scrolling (ang…
4692068 
…ular#16224)

The current implementation of the drag start delay does not allow scrolling on iOS devices.
Also, once the element has been scrolled once, the scrolling is never reenabled.

In order to fix this issue, we prevent default behaviour of pointer events fired after
the drag sequence has been started instead of initialized. Also, we toggle native
drag interactions when the drag sequence is ended.
Aboisier pushed a commit to cactusoft-ca/components that referenced this issue Jul 16, 2019
fix(drag-drop): fix drag start delay behavior to allow scrolling (ang…
e59c302 
…ular#16224)

The current implementation of the drag start delay does not allow scrolling on iOS devices.
Also, once the element has been scrolled once, the scrolling is never reenabled.

In order to fix this issue, we prevent default behaviour of pointer events fired after
the drag sequence has been started instead of initialized. Also, we toggle native
drag interactions when the drag sequence is ended.
Aboisier added a commit to cactusoft-ca/components that referenced this issue Jul 16, 2019
@Aboisier
fix(drag-drop): fix drag start delay behavior to allow scrolling (ang…
cd581c7 
…ular#16228)

The current implementation of the drag start delay does not allow scrolling on mobile devices.
Instead, the draggable element gets teleported to the cursor once the delay is elapsed.

In order to handle this use case, we cancel the drag sequence if the cursor moves before
the drag start delay is elapsed and we disable native drag interactions only when the
drag sequence is started instead of when it is initialized.

The drag start delay was also integrated to the drag drop demo.

Fixes angular#16224
(cherry picked from commit 738f10c)
@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 Sep 11, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(drag-drop): fix drag start delay behavior to allow scrolling (#16224)
2 participants
@crisbeto @Aboisier