diff --git a/src/index.tsx b/src/index.tsx index 25fe2ad82..233a1f4c0 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -460,7 +460,10 @@ export class Resizable extends React.PureComponent { this.window.addEventListener('mouseup', this.onMouseUp); this.window.addEventListener('mousemove', this.onMouseMove); this.window.addEventListener('mouseleave', this.onMouseUp); - this.window.addEventListener('touchmove', this.onMouseMove); + this.window.addEventListener('touchmove', this.onMouseMove, { + capture: true, + passive: false, + }); this.window.addEventListener('touchend', this.onMouseUp); } } @@ -470,7 +473,7 @@ export class Resizable extends React.PureComponent { this.window.removeEventListener('mouseup', this.onMouseUp); this.window.removeEventListener('mousemove', this.onMouseMove); this.window.removeEventListener('mouseleave', this.onMouseUp); - this.window.removeEventListener('touchmove', this.onMouseMove); + this.window.removeEventListener('touchmove', this.onMouseMove, true); this.window.removeEventListener('touchend', this.onMouseUp); } } @@ -727,6 +730,14 @@ export class Resizable extends React.PureComponent { if (!this.state.isResizing || !this.resizable || !this.window) { return; } + if (event instanceof TouchEvent) { + try { + event.preventDefault(); + event.stopPropagation(); + } catch (e) { + // Ignore on fail + } + } let { maxWidth, maxHeight, minWidth, minHeight } = this.props; const clientX = event instanceof this.window.MouseEvent ? event.clientX : event.touches[0].clientX; const clientY = event instanceof this.window.MouseEvent ? event.clientY : event.touches[0].clientY;