Normalize delta values on platforms where event.deltaX is 0 even as event.shiftKey is true

[trondpet]

Hi,

The current rsuite-table version has an issue where horizontal scroll with mousewheel + shitKey does not work as expected.

The issue can be reproduced & observed by trying to horizontally scroll tables with the mousewheel (wheel + shift key). The common behavior is to scroll horizontally when the shift key is pressed. For rsuite-table this works on some platforms (notably Mac) but not others (Win).

There's a repro case for rsuite-table (using dom-lib) here:
https://codesandbox.io/s/runtime-star-utr4bh?file=/src/App.js

And a stand-alone repro case for dom-lib showcasing the issue at:
https://codesandbox.io/s/practical-mestorf-6qpp44?file=/src/App.js

Please also ref. the screen recordings below in order to see difference in normalized delta values on Mac vs Windows. Note how the value for deltaX stays 0 on Windows, incl. when shiftKey === true -- this happens across different browsers (tested onChrome, Edge, Firefox):

dom-lib deltas on mac
dom-lib deltas on windows

Since dom-lib appears to be normalizing the deltas I'm proposing doing so here instead of in rsuite-table.
I do realize there's more risk involved in doing it here, though, and would be happy to submit a PR for rsuite-table where the values from dom-lib are used if you don't want to pull the change in here.

Thanks,
Trond

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
dom-lib	❌ Failed (Inspect)		Sep 27, 2022 at 3:52PM (UTC)

[trondpet]

Adding !isSideScrolling to try and limit any potential of backward breaking change

[trondpet]

npx browserslist@latest --update-db

[simonguo]

I think it's more reasonable to handle it in WheelHandler.js, what do you think?

dom-lib/src/WheelHandler.ts

Line 43 in 65f4548

const normalizedEvent = normalizeWheel(event);

let normalizedEvent = normalizeWheel(event);

if(navigator.platform !== 'MacIntel' && event.shiftKey){ 
    normalizedEvent = swapWheelAxis(normalizedEvent);
 }

const swapWheelAxis = (normalizedEvent)=>{
  return {
      spinX: normalizedEvent.spinY,
      spinY: normalizedEvent.spinX,
      pixelX: normalizedEvent.pixelY,
      pixelY: normalizedEvent.pixelX,
    };
}

[trondpet]

@simonguo

I think it's more reasonable to handle it in WheelHandler.js, what do you think?

Sure - that does sound reasonable and I can def. move it
(the reason I originally put it in the normalizeWheel util is that there was similar code there for "side scrolling on FF with DOMMouseScroll", but I don't mind moving it out of course).

Re: the navigator.platform !== 'MacIntel' check; I don't mind putting that in either, but had stayed away from such checks since I don't know if it might affect other platforms & had seen it done this way in the past. If you prefer to limit the impact by adding the platform check I'm fine w/that as well. That would work for us. I've updated the PR accordingly.

Thanks for your help :)

[github-actions]

🎉 This PR is included in version 3.1.3 🎉

The release is available on:

• GitHub release
• npm package (@latest dist-tag)

Your semantic-release bot 📦🚀