table icon indicating copy to clipboard operation
table copied to clipboard

Bug: Scroll event listener should be passive

Open gregor-mueller opened this issue 2 years ago • 0 comments

The scroll event listener on the table is not passive, resulting in unwanted behaviour:

  1. Chrome (and possibly other browsers) throw a warning in the console.
  2. Sometimes scrolling is interrupted (I can scroll to the right in some tables but when I scroll left, it stops and the back gesture is triggered on MAC, resulting in unwanted page navigation).

The culprit is the following line, as far as I can see:

https://github.com/react-component/table/blob/ff93e234f76f8ad5b8c6ce90855ba4d4db5e627a/src/FixedHolder/index.tsx#LL90C42-L90C42

It should be fixed with this change:

-    scrollRef.current?.addEventListener('wheel', onWheel);
+    scrollRef.current?.addEventListener('wheel', onWheel, {passive:true});

It's broadly supported: https://caniuse.com/passive-event-listener

For better backwards compatibility, a check for the support of the option can be added like in this example: https://github.com/RByers/rbyers.github.io/blob/master/scroll-latency.js#L95-L104

gregor-mueller avatar May 24 '23 13:05 gregor-mueller