Merge pull request #1362 from FormidableLabs/bug/passive-scroll

fix scroll wheel interaction in chrome
FormidableLabs · Aug 7, 2019 · 81e4205 · 81e4205
2 parents 5783618 + b5a8e63
commit 81e4205
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 4 deletions.
diff --git a/packages/victory-core/src/victory-container/victory-container.js b/packages/victory-core/src/victory-container/victory-container.js
@@ -61,6 +61,15 @@ export default class VictoryContainer extends React.Component {
     this.portalUpdate = (key, el) => this.portalRef.portalUpdate(key, el);
     this.portalRegister = () => this.portalRef.portalRegister();
     this.portalDeregister = (key) => this.portalRef.portalDeregister(key);
+
+    this.saveContainerRef = (container) => {
+      this.containerRef = props.containerRef || container;
+      return container;
+    };
+    this.shouldHandleWheel = props.events && props.events.onWheel;
+    if (this.shouldHandleWheel) {
+      this.handleWheel = (e) => e.preventDefault();
+    }
   }
 
   getChildContext() {
@@ -72,10 +81,19 @@ export default class VictoryContainer extends React.Component {
     };
   }
 
+  componentDidMount() {
+    if (this.shouldHandleWheel && this.containerRef) {
+      this.containerRef.addEventListener("wheel", this.handleWheel);
+    }
+  }
+
   componentWillUnmount() {
     if (!this.context.getTimer) {
       this.getTimer().stop();
     }
+    if (this.shouldHandleWheel && this.containerRef) {
+      this.containerRef.removeEventListener("wheel", this.handleWheel);
+    }
   }
 
   getTimer() {
@@ -127,7 +145,7 @@ export default class VictoryContainer extends React.Component {
       style: portalSvgStyle
     };
     return (
-      <div style={defaults({}, style, divStyle)} className={className} ref={props.containerRef}>
+      <div style={defaults({}, style, divStyle)} className={className} ref={this.saveContainerRef}>
         <svg {...svgProps} style={svgStyle}>
           {title ? <title id={this.getIdForElement("title")}>{title}</title> : null}
           {desc ? <desc id={this.getIdForElement("desc")}>{desc}</desc> : null}

diff --git a/packages/victory-zoom-container/src/victory-zoom-container.js b/packages/victory-zoom-container/src/victory-zoom-container.js
@@ -82,9 +82,6 @@ export const zoomContainerMixin = (base) =>
             },
             // eslint-disable-next-line max-params
             onWheel: (evt, targetProps, eventKey, ctx) => {
-              if (targetProps.allowZoom && !props.disable) {
-                evt.preventDefault();
-              }
               return props.disable ? {} : ZoomHelpers.onWheel(evt, targetProps, eventKey, ctx);
             }
           }