[zoom] make wheel event active by default. fixes #455

[hshoff]

The Problem

Chrome 73 made wheel event listeners passive by default. A passive event listener is an event listener that does not call preventDefault() on the event. This is great because it makes scrolling faster. https://developers.google.com/web/updates/2019/02/scrolling-intervention.

Google found 98% of wheel and mousewheel event listeners do not call preventDefault(). So the trade off here of faster scrolling on the web for the relatively small cost of 2% of listeners need to opt-in to making the wheel listener active. Unfortunately, <Zoom /> falls in the 2% here.

The recommended fix

Convert event listeners that rely on preventDefault() to active.

- node.addEventListener('wheel', this.handleWheel);
+ node.addEventListener('wheel', this.handleWheel, { passive: false });

But what about React?

Folks in react-land probably aren't used to writing addEventListener() these days. The more usual pattern is to add onWheel={this.handleWheel} prop. So how do we make an event listener active in React? My observed behavior of React is that it registers event listeners without a default value for passive (I could be wrong about this, I was running in circles in the React codebase). Ideally React would support the ability to set the passive value. Until then, we'll have to fall back to rolling our own addEventListener + removeEventListener.

The solution

Keeping the default behavior

The default behavior for <Zoom /> will be to add an active event listener in componentDidMount and remove it componentWillUnmount() and call preventDefault() on wheel events. This matches the previous default behavior, but requires the removal of a prop to get rid of the console warning from Chrome.

The breaking change

If you update to this version of @vx/zoom, you'll just have to remove onWheel={zoom.handleWheel} and the warning will go away and everything should work as before. The diff is small:

<MyComponent
- onWheel={zoom.handleWheel}
/>

Opt-in to passive on wheel event listener

The upside here is you now have a way to opt-in to passive on wheel event listener. This will not call preventDefault()

<Zoom
+ passive={true}
>
  {zoom => {
    return (
      <MyComponent
+      onWheel={zoom.handleWheel}
      /> 
    );
  }}
</Zoom>

Further reading

• https://developers.google.com/web/updates/2019/02/scrolling-intervention
• Chrome 56 breaks touch events facebook/react#8968
• Chrome 73 breaks wheel events facebook/react#14856
• Support Passive Event Listeners facebook/react#6436

Changelog

💥 Breaking Changes

• [zoom] make wheel event active by default. fixes Chrome 73 scroll intervention warning.
  • To keep the default behavior before Chrome 73 and remove console warnings in Chrome 73, remove:

    <MyComponent
    - onWheel={zoom.handleWheel}
    />

  • To make the onWheel events passive, add:

    <Zoom
    + passive={true}
    >
      {zoom => {
        return (
          <MyComponent
    +      onWheel={zoom.handleWheel}
          /> 
        );
      }}
    </Zoom>

📝 Documentation

• [zoom] update docs

Thanks to @j1mie for bringing this to my attention.