[FIX] Web: prevent triggering longPress when pointer is outside the button (#1083)

* fix on mobile

* fix on desktop

* ignore click after a longpress followed by a mouse leave

* fix regression

* Web: rewrite onResponderRelease/onPressOut rules

Author: dagatsoin

src/web/Button.tsx

@@ -60,7 +60,7 @@ export class Button extends ButtonBase {
 
     private _mountedButton: HTMLButtonElement | null = null;
     private _lastMouseDownEvent: Types.SyntheticEvent | undefined;
-    private _ignoreMouseUp = false;
+    private _ignoreTouchEnd = false;
     private _ignoreClick = false;
     private _longPressTimer: number | undefined;
     private _isMouseOver = false;
@@ -104,7 +104,8 @@ export class Button extends ButtonBase {
                 aria-checked={ ariaChecked }
                 onClick={ this.onClick }
                 onTouchStart={ this._onMouseDown }
-                onTouchEnd={ this._onMouseUp }
+                onTouchMove={ this._onTouchMove }
+                onTouchEnd={ this._onTouchEnd }
                 onContextMenu={ this._onContextMenu }
                 onMouseDown={ this._onMouseDown }
                 onMouseUp={ this._onMouseUp }
@@ -194,6 +195,7 @@ export class Button extends ButtonBase {
     }
 
     private _onMouseDown = (e: React.SyntheticEvent<any>) => {
+        this._isMouseOver = true;
         if (this.props.onPressIn) {
             this.props.onPressIn(e);
         }
@@ -211,21 +213,32 @@ export class Button extends ButtonBase {
                 if (this.props.onLongPress) {
                     // lastMouseDownEvent can never be undefined at this point
                     this.props.onLongPress(this._lastMouseDownEvent!);
-                    this._ignoreMouseUp = true;
-                    this._ignoreClick = true;
+
+                    if ('touches' in e) {
+                        this._ignoreTouchEnd = true;
+                    } else {
+                        this._ignoreClick = true;
+                    }
                 }
             }, this.props.delayLongPress || _longPressTime);
         }
     }
 
-    private _onMouseUp = (e: Types.SyntheticEvent | Types.TouchEvent) => {
-        if (this._ignoreMouseUp) {
-            e.stopPropagation();
-            // Touch event won't trigger onClick when a long press is released. So we reset the ignore flag here.
-            if ('touches' in e) {
-                this._ignoreClick = false;
-            }
+    private _onTouchMove = (e: React.SyntheticEvent<HTMLButtonElement, TouchEvent>) => {
+        const buttonRect = (e.target as HTMLButtonElement).getBoundingClientRect();
+        this._isMouseOver =
+            e.nativeEvent.touches[0].clientX > buttonRect.left &&
+            e.nativeEvent.touches[0].clientX < buttonRect.right &&
+            e.nativeEvent.touches[0].clientY > buttonRect.top &&
+            e.nativeEvent.touches[0].clientY < buttonRect.bottom;
+
+        // Touch has left the button, cancel the longpress handler.
+        if (this._isMouseOver && this._longPressTimer) {
+            clearTimeout(this._longPressTimer);
         }
+    }
+
+    private _onMouseUp = (e: Types.SyntheticEvent | Types.TouchEvent) => {
         if (this.props.onPressOut) {
             this.props.onPressOut(e);
         }
@@ -235,6 +248,40 @@ export class Button extends ButtonBase {
         }
     }
 
+    /**
+     * Case where onPressOut is not triggered and the bubbling is canceled:
+     * 1- Long press > release
+     *
+     * Cases where onPressOut is triggered:
+     * 2- Long press > leave button > release touch
+     * 3- Tap
+     *
+     * Case where onPressOut is not triggered and the bubbling is NOT canceled:
+     * 4- Press in > leave button > release touch
+     */
+    private _onTouchEnd = (e: Types.SyntheticEvent | Types.TouchEvent) => {
+        if (this._isMouseOver && this._ignoreTouchEnd) {
+            /* 1 */
+            e.stopPropagation();
+        } else if (
+            /* 2 */
+            !this._isMouseOver && this._ignoreTouchEnd ||
+            /* 3 */
+            this._isMouseOver && !this._ignoreTouchEnd
+        ) {
+            if (this.props.onPressOut) {
+                this.props.onPressOut(e);
+            }
+        } else {
+            /* 4 */
+            this._ignoreTouchEnd = false;
+        }
+
+        if (this._longPressTimer) {
+            clearTimeout(this._longPressTimer);
+        }
+    }
+
     private _onMouseEnter = (e: Types.SyntheticEvent) => {
         this._isMouseOver = true;
         this._onHoverStart(e);
@@ -243,6 +290,14 @@ export class Button extends ButtonBase {
     private _onMouseLeave = (e: Types.SyntheticEvent) => {
         this._isMouseOver = false;
         this._onHoverEnd(e);
+
+        // The mouse is still down. A long press may be just happened. Re-enable the next click.
+        this._ignoreClick = false;
+
+        // Cancel longpress if mouse has left.
+        if (this._longPressTimer) {
+            clearTimeout(this._longPressTimer);
+        }
     }
 
     // When we get focus on an element, show the hover effect on the element.