Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
jjenzz opened this issue Mar 23, 2019 · 4 comments
Closed

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

jjenzz opened this issue Mar 23, 2019 · 4 comments

Comments

@jjenzz
Copy link

jjenzz commented Mar 23, 2019

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.

image
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 react@16.8.5, react-dom@16.8.5 and Chrome v73. I'm unsure if previous versions are affected.

@jjenzz jjenzz changed the title Cannot preventDefault onWheel event on input[type=number] in Chrome Cannot preventDefault input[type=number] onWheel event in Chrome Mar 23, 2019
@charlzzdev
Copy link

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
Copy link
Author

jjenzz commented Mar 24, 2019

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
Copy link

ghost commented Mar 25, 2019

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

@gaearon
Copy link
Collaborator

gaearon commented Mar 26, 2019

This is a duplicate of #14856.

@gaearon gaearon closed this as completed Mar 26, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants