Cannot preventDefault input[type=number] onWheel event in Chrome

[jjenzz]

Do you want to request a feature or report a bug?

Bug

What is the current behavior?

In Chrome, using event.preventDefault() and/or event.nativeEvent.preventDefault() within onWheel handler of an input[type=number] does not prevent number scrolling.

https://www.chromestatus.com/features/6662647093133312

React example: https://codesandbox.io/s/00kx423nyl
HTML & JS example for comparison: https://jsbin.com/warerunitu/edit?html,js,output

What is the expected behavior?

I would expect the same behaviour as shown in the HTML & JS example above.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

Tested in [email protected], [email protected] and Chrome v73. I'm unsure if previous versions are affected.

[charlzzdev]

Hey! You could do it the same way as in the HTML & JS example using the useEffect hook like this:

function App() {
  useEffect(() => {
    document.getElementById('theid').addEventListener('wheel', event => {
      event.preventDefault()

      console.log(
        event,
        event.defaultPrevented
      )
    })
  }, [])

  return (
    <div className="App">
      <input
        type="number"
        id="theid"
      />
    </div>
  );
}

[jjenzz]

Sure, I’m just reporting the issue with onWheel here. It would be good to be able to use React if I’m using React 😊

[ghost]

There should be a flag for passive mode tbh if there isn't already

[gaearon]

This is a duplicate of #14856.