Search code examples
javascriptreactjsmousewheel

Disable scrolling on `<input type=number>` in React

This question was asked before but provided solution is just for jQuery, as I'm facing same problem in ReactJs.

Is it possible to disable the scroll wheel changing the number in an input number field? I removed spinner arrows using CSS but mouse wheel still working and messing the functionality.

I want input type number because it gives numeric keyboard on mobile/touch devices.

Solution

  • I had the same problem, except I was working on desktop version only. To blur the focus on the input as suggested in other answers works to stop the scrolling. But it wasn't what I wanted. I still want the user to be able to change the input with the keyboard.

    So to disable scrolling on <input type=number> in React I added an onFocus property as follows:

    <input
    //...some input properties...//
    type="number"
    onFocus={(e) => e.target.addEventListener("wheel", function (e) { e.preventDefault() }, { passive: false })}
/>

    It worked fine for me. I hope it helps others.