fix(column): Use passive wheel listener (#4348)

* chore(yarn): Install detect-passive-events

* fix(column): Use passive listener

diff --git a/app/javascript/mastodon/components/column.js b/app/javascript/mastodon/components/column.js
index 3cbb745c5aac693ec0df808e79516b175d869db2..93f1d6260b35a56fd2dd7523e5638ea9d6356eb4 100644 (file)
--- a/app/javascript/mastodon/components/column.js
+++ b/app/javascript/mastodon/components/column.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import detectPassiveEvents from 'detect-passive-events';
 import scrollTop from '../scroll';
 
 export default class Column extends React.PureComponent {
@@ -30,11 +31,19 @@ export default class Column extends React.PureComponent {
     this.node = c;
   }
 
+  componentDidMount () {
+    this.node.addEventListener('wheel', this.handleWheel,  detectPassiveEvents ? { passive: true } : false);
+  }
+
+  componentWillUnmount () {
+    this.node.removeEventListener('wheel', this.handleWheel);
+  }
+
   render () {
     const { children } = this.props;
 
     return (
-      <div role='region' className='column' ref={this.setRef} onWheel={this.handleWheel}>
+      <div role='region' className='column' ref={this.setRef}>
         {children}
       </div>
     );

diff --git a/package.json b/package.json
index c90e49db5c8b66bbd4de825e5ab07b5b09a090f9..132d7017d53b3492c24eb4ce483317fc11c1294b 100644 (file)
--- a/package.json
+++ b/package.json
@@ -44,6 +44,7 @@
     "compression-webpack-plugin": "^0.4.0",
     "cross-env": "^5.0.1",
     "css-loader": "^0.28.4",
+    "detect-passive-events": "^1.0.2",
     "dotenv": "^4.0.0",
     "emojione": "^2.2.7",
     "emojione-picker": "^2.2.1",

diff --git a/yarn.lock b/yarn.lock
index dcf09643e05bf653cccf85f6f8f2dd1979f01feb..0f895f3b61be6495a038822f3a2646ea0279534a 100644 (file)
--- a/yarn.lock
+++ b/yarn.lock
@@ -2328,6 +2328,10 @@ detect-node@^2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/detect-node/-/detect-node-2.0.3.tgz#a2033c09cc8e158d37748fbde7507832bd6ce127"
 
+detect-passive-events@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/detect-passive-events/-/detect-passive-events-1.0.2.tgz#0e39d7b675907eff55b8965f5be3fc0b0f4178b9"
+
 diff@3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/diff/-/diff-3.2.0.tgz#c9ce393a4b7cbd0b058a725c93df299027868ff9"