Merge pull request #5051 from ManelBH/fix

Improved browser compatibility for table scroll

Author: archmoj

src/traces/table/plot.js

@@ -57,13 +57,14 @@ module.exports = function plot(gd, wrappedTraceHolders) {
         .classed(c.cn.tableControlView, true)
         .style('box-sizing', 'content-box');
     if(dynamic) {
+        var wheelEvent = 'onwheel' in document ? 'wheel' : 'mousewheel';
         cvEnter
             .on('mousemove', function(d) {
                 tableControlView
                     .filter(function(dd) {return d === dd;})
                     .call(renderScrollbarKit, gd);
             })
-            .on('mousewheel', function(d) {
+            .on(wheelEvent, function(d) {
                 if(d.scrollbarState.wheeling) return;
                 d.scrollbarState.wheeling = true;
                 var newY = d.scrollY + d3.event.deltaY;

test/jasmine/assets/mouse_event.js

@@ -36,10 +36,8 @@ module.exports = function(type, x, y, opts) {
     var el = (opts && opts.element) || document.elementFromPoint(x, y);
     var ev;
 
-    if(type === 'scroll' || type === 'mousewheel') {
-        // somehow table needs this to be mouswheel but others need wheel.
-        // yet they all work the same in the browser?
-        type = (type === 'scroll') ? 'wheel' : 'mousewheel';
+    if(type === 'scroll' || type === 'wheel') {
+        type = 'wheel';
         ev = new window.WheelEvent(type, Lib.extendFlat({}, fullOpts, opts));
     } else {
         ev = new window.MouseEvent(type, fullOpts);

test/jasmine/tests/table_test.js

@@ -415,7 +415,7 @@ describe('table', function() {
             gdWheelEventCount = 0;
             Plotly.plot(gd, mockCopy.data, mockCopy.layout)
             .then(function() {
-                gd.addEventListener('mousewheel', function(evt) {
+                gd.addEventListener('wheel', function(evt) {
                     gdWheelEventCount++;
                     // make sure we don't *really* scroll the page.
                     // that would be annoying!
@@ -440,7 +440,7 @@ describe('table', function() {
 
         function scroll(pos, dy) {
             mouseEvent('mousemove', pos.x, pos.y);
-            mouseEvent('mousewheel', pos.x, pos.y, {deltaX: 0, deltaY: dy});
+            mouseEvent('wheel', pos.x, pos.y, {deltaX: 0, deltaY: dy});
         }
 
         it('bubbles scroll events iff they did not scroll a table', function() {