From aa01be2dbe314672c2a670edf7794ae7e34b45ad Mon Sep 17 00:00:00 2001
From: Timur Khazamov <bboytx@gmail.com>
Date: Sun, 5 Jan 2020 01:11:23 +0500
Subject: [PATCH] Fixed Unable to preventDefault errors in Chrome (#130)

* Fixed Unable to preventDefault errors in Chrome

* Cleanup wheel event listener
---
 src/index.tsx | 32 ++++++++++++++++++++++++--------
 1 file changed, 24 insertions(+), 8 deletions(-)

diff --git a/src/index.tsx b/src/index.tsx
index 7ecf57d7..c8bc54e7 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -940,6 +940,8 @@ class App extends React.Component<{}, AppState> {
     this.forceUpdate();
   };
 
+  private removeWheelEventListener: (() => void) | undefined;
+
   public render() {
     return (
       <div
@@ -1110,13 +1112,18 @@ class App extends React.Component<{}, AppState> {
           id="canvas"
           width={window.innerWidth - CANVAS_WINDOW_OFFSET_LEFT}
           height={window.innerHeight - CANVAS_WINDOW_OFFSET_TOP}
-          onWheel={e => {
-            e.preventDefault();
-            const { deltaX, deltaY } = e;
-            this.setState(state => ({
-              scrollX: state.scrollX - deltaX,
-              scrollY: state.scrollY - deltaY
-            }));
+          ref={canvas => {
+            if (this.removeWheelEventListener) {
+              this.removeWheelEventListener();
+              this.removeWheelEventListener = undefined;
+            }
+            if (canvas) {
+              canvas.addEventListener("wheel", this.handleWheel, {
+                passive: false
+              });
+              this.removeWheelEventListener = () =>
+                canvas.removeEventListener("wheel", this.handleWheel);
+            }
           }}
           onMouseDown={e => {
             // only handle left mouse button
@@ -1172,7 +1179,7 @@ class App extends React.Component<{}, AppState> {
                 isResizingElements = true;
               } else {
                 let hitElement = null;
-                
+
                 // We need to to hit testing from front (end of the array) to back (beginning of the array)
                 for (let i = elements.length - 1; i >= 0; --i) {
                   if (hitTest(elements[i], x, y)) {
@@ -1394,6 +1401,15 @@ class App extends React.Component<{}, AppState> {
     );
   }
 
+  private handleWheel = (e: WheelEvent) => {
+    e.preventDefault();
+    const { deltaX, deltaY } = e;
+    this.setState(state => ({
+      scrollX: state.scrollX - deltaX,
+      scrollY: state.scrollY - deltaY
+    }));
+  };
+
   componentDidUpdate() {
     renderScene(rc, context, {
       scrollX: this.state.scrollX,