From b7441b96f9eb0921dbe03922e0f11d80f0610bb5 Mon Sep 17 00:00:00 2001 From: Voakie Date: Mon, 6 Jul 2020 16:19:00 +0200 Subject: [PATCH] Fixes #522 - Resize without page scrolling on mobile (#640) * Fix resizing on mobile * Revert fast-memoize upgrade * Fix `removeEventListener` --- src/index.tsx | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) 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;