Skip to content

Commit 53cecbb

Browse files
crisbetommalerba
authored andcommittedDec 5, 2018
fix(drag-drop): error on touch end (#14392)
Fixes an error being thrown by `CdkDrag` when the `touchend` event fires. Fixes #14390. Marking as P2 since this will throw consistently on touch devices.
1 parent 74e945a commit 53cecbb

File tree

2 files changed

+26
-1
lines changed

2 files changed

+26
-1
lines changed
 

‎src/cdk/drag-drop/drag.spec.ts

+24
Original file line numberDiff line numberDiff line change
@@ -1895,6 +1895,30 @@ describe('CdkDrag', () => {
18951895
.toEqual(['Zero', 'One', 'Two', 'Three']);
18961896
}));
18971897

1898+
it('should not throw if the `touches` array is empty', fakeAsync(() => {
1899+
const fixture = createComponent(DraggableInDropZone);
1900+
fixture.detectChanges();
1901+
const item = fixture.componentInstance.dragItems.toArray()[1].element.nativeElement;
1902+
1903+
dispatchTouchEvent(item, 'touchstart');
1904+
fixture.detectChanges();
1905+
1906+
dispatchTouchEvent(document, 'touchmove');
1907+
fixture.detectChanges();
1908+
1909+
dispatchTouchEvent(document, 'touchmove', 50, 50);
1910+
fixture.detectChanges();
1911+
1912+
expect(() => {
1913+
const endEvent = createTouchEvent('touchend', 50, 50);
1914+
Object.defineProperty(endEvent, 'touches', {get: () => []});
1915+
1916+
dispatchEvent(document, endEvent);
1917+
fixture.detectChanges();
1918+
}).not.toThrow();
1919+
1920+
}));
1921+
18981922
});
18991923

19001924
describe('in a connected drop container', () => {

‎src/cdk/drag-drop/drag.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -790,7 +790,8 @@ export class CdkDrag<T = any> implements AfterViewInit, OnDestroy {
790790

791791
/** Determines the point of the page that was touched by the user. */
792792
private _getPointerPositionOnPage(event: MouseEvent | TouchEvent): Point {
793-
const point = this._isTouchEvent(event) ? event.touches[0] : event;
793+
// `touches` will be empty for start/end events so we have to fall back to `changedTouches`.
794+
const point = this._isTouchEvent(event) ? (event.touches[0] || event.changedTouches[0]) : event;
794795

795796
return {
796797
x: point.pageX - this._scrollPosition.left,

0 commit comments

Comments
 (0)
Please sign in to comment.