Skip to content

fix(drag-drop): stop dragging sequence on touchcancel #12935

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

Closed
wants to merge 1 commit into from
Closed

fix(drag-drop): stop dragging sequence on touchcancel #12935

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 21 additions & 8 deletions src/cdk/drag-drop/drag-drop-registry.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,9 +69,9 @@ describe('DragDropRegistry', () => {
const subscription = registry.pointerMove.subscribe(spy);

registry.startDragging(testComponent.dragItems.first, createMouseEvent('mousedown'));
dispatchMouseEvent(document, 'mousemove');
const event = dispatchMouseEvent(document, 'mousemove');

expect(spy).toHaveBeenCalled();
expect(spy).toHaveBeenCalledWith(event);

subscription.unsubscribe();
});
Expand All @@ -82,9 +82,9 @@ describe('DragDropRegistry', () => {

registry.startDragging(testComponent.dragItems.first,
createTouchEvent('touchstart') as TouchEvent);
dispatchTouchEvent(document, 'touchmove');
const event = dispatchTouchEvent(document, 'touchmove');

expect(spy).toHaveBeenCalled();
expect(spy).toHaveBeenCalledWith(event);

subscription.unsubscribe();
});
Expand All @@ -107,9 +107,9 @@ describe('DragDropRegistry', () => {
const subscription = registry.pointerUp.subscribe(spy);

registry.startDragging(testComponent.dragItems.first, createMouseEvent('mousedown'));
dispatchMouseEvent(document, 'mouseup');
const event = dispatchMouseEvent(document, 'mouseup');

expect(spy).toHaveBeenCalled();
expect(spy).toHaveBeenCalledWith(event);

subscription.unsubscribe();
});
Expand All @@ -120,9 +120,22 @@ describe('DragDropRegistry', () => {

registry.startDragging(testComponent.dragItems.first,
createTouchEvent('touchstart') as TouchEvent);
dispatchTouchEvent(document, 'touchend');
const event = dispatchTouchEvent(document, 'touchend');

expect(spy).toHaveBeenCalled();
expect(spy).toHaveBeenCalledWith(event);

subscription.unsubscribe();
});

it('should dispatch `touchcancel` events if the drag was interrupted', () => {
const spy = jasmine.createSpy('pointerUp spy');
const subscription = registry.pointerUp.subscribe(spy);

registry.startDragging(testComponent.dragItems.first,
createTouchEvent('touchstart') as TouchEvent);
const event = dispatchTouchEvent(document, 'touchcancel');

expect(spy).toHaveBeenCalledWith(event);

subscription.unsubscribe();
});
Expand Down
11 changes: 11 additions & 0 deletions src/cdk/drag-drop/drag-drop-registry.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -126,6 +126,10 @@ export class DragDropRegistry<I, C extends {id: string}> implements OnDestroy {
const isTouchEvent = event.type.startsWith('touch');
const moveEvent = isTouchEvent ? 'touchmove' : 'mousemove';
const upEvent = isTouchEvent ? 'touchend' : 'mouseup';
const upConfig = {
handler: (e: Event) => this.pointerUp.next(e as TouchEvent | MouseEvent),
options: true
};

// We explicitly bind __active__ listeners here, because newer browsers will default to
// passive ones for `mousemove` and `touchmove`. The events need to be active, because we
Expand All @@ -151,6 +155,13 @@ export class DragDropRegistry<I, C extends {id: string}> implements OnDestroy {
options: activeCapturingEventOptions
});

if (isTouchEvent) {
// Treat `touchcancel` events the same as `touchend`. `touchcancel` will fire for cases
// like an OS-level event interrupting the touch sequence or the user putting too many
// finger on the screen at the same time.
this._globalListeners.set('touchcancel', upConfig);
Copy link
Member

@jelbourn jelbourn Sep 4, 2018 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would this mean that a touchcancel would effectively count as a "drop" of you had your finger over a cdk-drop?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It does, but I think that this is what we want since it's the event that fires instead of touchend if something like an OS popup interrupts the dragging.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would it be difficult to abort the drop for this case? I would think that's the safest course of action, since we'll never know whether the drop will be committing some meaningful action (like sending a missile alert for Hawaii...)

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Currently we have most the necessary info, but we don't have an API to abort a drag. I could set something up, but it means that there would be another event that the consumer needs to be aware about and that even can only realistically fire on a touch device.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it would still be better to abort though; even though it's an edge case, I except any "cancelled" action to have no effect

}

this._ngZone.runOutsideAngular(() => {
this._globalListeners.forEach((config, name) => {
this._document.addEventListener(name, config.handler, config.options);
Expand Down