Pan and Zoom cause warnings in Chrome 73

[kephin]

🐛Bug report

Describe the bug Pan and zoom behavior will also scroll the full screen after Chrome upgrades to version 73. And we can see warnings in the console. This bug only happens at Chrome version 73. It works fine in Chrome below version 73 and Firefox, Safari.

To Reproduce This issue happens for all charts setting enablePanZoom to true.

Expected behavior

1. Able to pan and zoom without scrolling the full screen
2. No warnings in console

Screenshots

Desktop (please complete the following information):

• OS: macOS
• Browser: chrome
• Version: 73.0.3683.86

Additional context I would like to help to solve this issue if you don't mind giving me some directions because we use your library for our product 😅. Thank you guys for your hard works!

[sartaj10]

@kephin Hi there, thanks for raising this issue.

Is this similar to another issue raised recently? https://github.com/esnet/react-timeseries-charts/issues/375

^The above was fixed and will be available in the upcoming release

[kephin]

@sartaj10 Yes, it's the same issue. Sorry didn't catch that. Thanks for your hard works. 😄

[markpradhan]

Hmm, until the newer version is released you can use this to block the scroll behaviour.

import React, { useRef, useEffect } from 'react'

const BlockPageScroll = ({ children }) => {
  const scrollRef = useRef(null)
  useEffect(() => {
    const scrollEl = scrollRef.current
    scrollEl.addEventListener('wheel', stopScroll)
  }, [])
  const stopScroll = e => e.preventDefault()
  return (
    <div ref={scrollRef}>
      {children}
    </div>
  )
}

const Main = () => (
  <BlockPageScroll>
    <div>Scrolling here will only be targeted to inner elements</div>
  </BlockPageScroll>
)

[kephin]

It could be our temporary fix, thanks man!

[wtesler]

Great work @markpradhan . This is a great workaround until the next build happens.